Flutter snapshot.data() 總是 null

Question

我試圖在我的 Flutter Web 應用程序中顯示來自 Firestore 的數據，但我沒有獲得任何數據。

基本上我只是調整了這個例子： https://firebase.flutter.dev/docs/firestore/usage#realtime-changes

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class DataList extends StatefulWidget {
  @override
  _DataListState createState() => _DataListState();
}

class _DataListState extends State<DataList> {
  @override
  Widget build(BuildContext context) {
    CollectionReference collectionReference = FirebaseFirestore.instance.collection('data');

    return StreamBuilder<QuerySnapshot>(
      stream: collectionReference.snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        print('HasData: ${snapshot.hasData}');

        if (snapshot.hasError) {
          print(snapshot.error);
          return Text('Error: ${snapshot.error}');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }
        return new ListView(
           children: snapshot.data.docs.map((DocumentSnapshot document) {
              return new ListTile(
              title: new Text(document.data()['name']),
              subtitle: new Text(document.data()['description']),
              );
          }).toList(),
        );
      },
    );
  }
}

但 snapshot.hasData 始終為 null，我收到此錯誤： [cloud_firestore/unknown] NoSuchMethodError: invalid member on null: 'includeMetadataChanges'

獲取單個文檔工作正常：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class GetData extends StatelessWidget {
  final String documentId;

  GetData(this.documentId);

  @override
  Widget build(BuildContext context) {
    CollectionReference collectionReference = FirebaseFirestore.instance.collection('data');

    return FutureBuilder<DocumentSnapshot>(
      future: collectionReference.doc(documentId).get(),
      builder:
          (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {

        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.connectionState == ConnectionState.done) {
          Map<String, dynamic> data = snapshot.data.data();
          return Text("Name: ${data['name']}, Description: ${data['description']}");
        }

        return Text("loading");
      },
    );
  }
}

我究竟做錯了什么？

順便說一句，我真的不需要它是實時的。

Answer 1

嘗試將index.html文件中的 firestore 腳本替換為：

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