Flutter Web应用无法读取Cloud Firestore数据 写入与移动端运行正常

1. 修正 index.html 的 Firebase 初始化配置 #

你当前的 index.html 存在旧版配置遗留问题：

• 手动引入了全套 Firebase Web SDK 脚本，还手动执行了空配置的 firebase.initializeApp()。你使用的 FlutterFire 插件 会在 Web 端自动完成 SDK 注入和初始化，多余的空配置初始化会覆盖插件自动加载的正确配置，导致数据请求路由异常。
• 解决操作：
  • 删除 index.html 中所有以 https://www.gstatic.com/firebasejs/ 开头的 script 标签
  • 删除手写的 firebaseConfig 变量和 firebase.initializeApp(firebaseConfig) 代码块
  • 确保 Flutter 项目中已经完成 Firebase 配置文件的关联（firebase_options.dart 自动生成且已在 main 函数中初始化）

2. 检查 Firestore 安全规则的来源限制 #

Android/iOS 端功能正常、仅 Web 端读取异常，大概率是安全规则对请求来源做了限制：

• 先排查规则中是否存在仅允许特定 auth 状态、特定请求来源的读取限制，比如未给 Web 端的请求匹配读取权限。
• 临时测试可以先把规则调整为短期开放的测试规则：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if request.time < timestamp.date(2024, 12, 31);
      }
    }
  }
  

  如果调整后 Web 端可以正常读取，再逐步收紧规则，把 Web 部署域名加入权限白名单即可。

3. 补充 StreamBuilder 的错误捕获逻辑 #

你当前的 StreamBuilder 只处理了无数据的加载状态，没有捕获读取报错，导致异常时只会一直显示加载动画，无法定位问题：

• 修改 StreamBuilder 的 builder 逻辑，增加错误判断分支，直接打印或展示具体报错信息：

StreamBuilder<List<News>>(
  stream: newsBloc.getAllNews,
  builder: (context, snapshot) {
    // 优先处理读取异常
    if (snapshot.hasError) {
      return Text('数据加载失败：${snapshot.error}');
    }
    if (!snapshot.hasData) {
      return (UniversalPlatform.isIOS)
          ? CupertinoActivityIndicator()
          : CircularProgressIndicator();
    }
    // 后续原有列表渲染逻辑
  }
)

4. 排查依赖版本兼容问题 #

你当前使用的 firebase_core ^0.7.0、cloud_firestore ^0.16.0 属于早期 FlutterFire 版本，和手动引入的 8.2.7 版 Firebase Web SDK 存在已知兼容问题，容易出现读取请求失败的情况。

• 按照第一步操作删除手动引入的 SDK 后，插件会自动匹配兼容的 Web SDK 版本，即可解决兼容问题。
• 如果仍有异常，可以升级到当前稳定版的 FlutterFire 依赖。

内容的提问来源于stack exchange，提问作者mame