无法从 Flutter Web 读取 Firestore 中的数据（适用于 iOS 和 android）答案

【问题标题】：Can't read data from Firestore from Flutter Web (works on iOS and android)无法从 Flutter Web 读取 Firestore 中的数据（适用于 iOS 和 android）
【发布时间】：2021-06-14 17:02:04
【问题描述】：

在我的应用程序中，我可以在 iOS、android 和 web 上登录（使用 firebase auth）。当我尝试使用流构建器从 Firestore 数据库中读取数据时，它仅适用于 iOS 和 android。在 web 部分中，它直接进入 snaps.HasData 的 else 子句。

我的 index.html 文件（firebaseConfig 明显删除）：

   <body>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-functions.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-remote-config.js"></script>
    
    <script>
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      var firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: ""
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>
      <!-- This script installs service_worker.js to provide PWA functionality to
           application. For more information, see:
           https://developers.google.com/web/fundamentals/primers/service-workers -->
      <script>
        if ('serviceWorker' in navigator) {
          window.addEventListener('flutter-first-frame', function () {
            navigator.serviceWorker.register('flutter_service_worker.js');
          });
        }
      </script>
      <script src="main.dart.js" type="application/javascript"></script>
    </body>

登录时我的仪表板屏幕。在我的控制台中，我得到打印“进入 streambuilder”，但没有打印“快照有数据”：

return Scaffold(
      key: _scaffoldKey,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70.0),
        child: AppBar(
          title: Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: StreamBuilder<List<Users>>(
                stream: database.users(),
                builder: (context, snapshot) {
                  print("enters streambuilder");
                  if (snapshot.hasData) {
                    print("snapshot has data");
                    final users = snapshot.data;
                    if (users.isNotEmpty) {
                      print("users is not empty");
...

这些是我的 pubspec.yaml 依赖项：

environment:
  sdk: ">=2.2.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter

  firebase_core_platform_interface: 4.0.0
  firebase_storage_web: 1.0.0
  firebase_auth_web: 1.0.0
  firebase_core: 1.0.1
  firebase_core_web: 1.0.1
  firebase_storage: 8.0.0
  firebase_messaging: 9.0.0
  firebase_dynamic_links: ^0.5.0+11
  firebase_auth: 1.0.0
  cloud_firestore: 1.0.0
  cloud_firestore_web: 1.0.1
...

我是否缺少任何依赖项？无法弄清楚为什么我无法从 Firestore 读取数据。我已经仔细检查了 firebaseConfig 设置是否与我在 firebase 中的项目设置正确设置。

【问题讨论】：

标签： flutter dart google-cloud-firestore flutter-web

【解决方案1】：

在这里找到解决方案Stackoverflow: Flutter Web - Fetching Firestore collection

显然使用版本 8.3.0 是问题所在。改用 7.14.4

【讨论】：