Flutter web无法从firestore获取数据

Posted 2023-02-23

【中文标题】Flutter web无法从firestore获取数据

【英文标题】：Flutter web unable to get data from firestore

【发布时间】：2021-07-14 07:26:40

【问题描述】：

我在从 Firestore 获取数据时遇到问题，代码如下：-

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:machineweb/model/models.dart';



class ProductArgs 
  String crop;
  ProductArgs(this.crop);


class ShowProduct extends StatefulWidget 
  static String route = '\showproductroute';
  @override
  _ShowProductState createState() => _ShowProductState();


class _ShowProductState extends State<ShowProduct> 
  @override
  Widget build(BuildContext context) 
    double screenWidthSize = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    ProductArgs args = ModalRoute.of(context).settings.arguments;

    FirebaseFirestore firestore = FirebaseFirestore.instance;

    List<DocumentSnapshot> products = []; // stores fetched products

    bool isLoading = false; // track if products fetching

    bool hasMore = true; // flag for more products available or not

    int documentLimit = 2; // documents to be fetched per request

    DocumentSnapshot
        lastDocument; // flag for last document from where next 10 records to be fetched

    ScrollController _scrollController = ScrollController();

    print(args.crop);

    getProducts() async 
      if (!hasMore) 
        print('No More Products');
        return;
      
      if (isLoading) 
        return;
      
      setState(() 
        isLoading = true;
      );
      QuerySnapshot querySnapshot;
      if (lastDocument == null) 
        querySnapshot = await firestore
            .collection('productData')
            .where('type', isEqualTo: args.crop)
            .limit(documentLimit)
            .get();
       else 
        querySnapshot = await firestore
            .collection('productData')
            .where('type', isEqualTo: args.crop)
            .startAfterDocument(lastDocument)
            .limit(documentLimit)
            .get();
        print(1);
      
      if (querySnapshot.docs.length < documentLimit) 
        hasMore = false;
      
      lastDocument = querySnapshot.docs[querySnapshot.docs.length - 1];
      products.addAll(querySnapshot.docs);
      setState(
        () 
          isLoading = false;
        ,
      );
    

    _scrollController.addListener(
      () 
        double maxScroll = _scrollController.position.maxScrollExtent;
        double currentScroll = _scrollController.position.pixels;
        double delta = MediaQuery.of(context).size.height * 0.20;
        if (maxScroll - currentScroll <= delta) 
          getProducts();
        
      ,
    );

    int _crossAxisCount = 0;

    if (screenWidthSize > 720) 
      _crossAxisCount = 3;
     else if (screenWidthSize > 520) 
      _crossAxisCount = 2;
     else 
      _crossAxisCount = 1;
    

    print(products.length.toString());

    return Container(
      child: Column(children: [
        Expanded(
          child: products.length == 0
              ? Center(
                  child: Text('No Data...'),
                )
              : ListView.builder(
                  controller: _scrollController,
                  itemCount: products.length,
                  itemBuilder: (context, index) 
                    return ListTile(
                      contentPadding: EdgeInsets.all(5),
                      title: Text(products[index].data()['name']),
                      subtitle: Text(products[index].data()['short_desc']),
                    );
                  ,
                ),
        ),
        isLoading
            ? Container(
                width: MediaQuery.of(context).size.width,
                padding: EdgeInsets.all(5),
                color: Colors.yellowAccent,
                child: Text(
                  'Loading',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            : Container()
      ]),
    );
  

products.lenght 为零，即使 firestore 上有数据。

这是我的index.html:-

  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-storage.js"></script>

甚至尝试将其更改为：-

<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-storage.js"></script>

如何从 firestore 获取数据，我尝试使用其他包，即使没有用。

任何解决方案，有很多类似的问题，但不是通过问题解决？

【问题讨论】：

你初始化了firebase web吗？ firebase.flutter.dev/docs/installation/web

我可以写入数据，但无法读取它@SaurabhK.Sharma，是的，我已经对其进行了初始化。

请检查您的 Firestore 规则。并分享您阅读时遇到的错误。

没有错误，如果用户ID不为空，则允许读写。@SaurabhK.Sharma

快照错误如下。快照错误：[cloud_firestore/unknown] NoSuchMethodError：null 成员无效：'includeMetadataChanges' 如何解决此问题？谢谢。

【参考方案1】：

这可能是因为您忘记添加 Firestore 规则以允许从您的收藏中获取数据。我建议您检查获取快照是否出错。您可以通过添加到您的代码来做到这一点：

if (snapshot.hasError)  print(snapshot.error.toString()) 

【讨论】：

快照错误如下。快照错误：[cloud_firestore/unknown] NoSuchMethodError：null 成员无效：'includeMetadataChanges' 我该如何解决这个问题？

我可以通过在 index.html 中将 Firebase JS SDK 版本从 8.1 更新到 7.22.1 来解决我的问题。请参阅以下文章。谢谢。 ***.com/questions/65001207/…

【参考方案2】：

通过将index.html 中的所有版本更改为：-

  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-storage.js"></script>

不仅仅是firebase-storage版本：-

<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-storage.js"></script>

我知道我为此提出一个问题有点愚蠢，但是是的，现在它有效了。