部署Angular至Firebase后Firestore数据不显示，本地正常，求排查原因

这种情况我碰到过好多次了，大概率是部署环境和本地的差异导致的，下面是几个最常见的原因，你可以挨个排查：

本地开发时你可能用的是宽松的测试规则（比如允许所有读写请求），但部署后忘记更新规则，Firebase默认的规则是只允许认证用户访问，甚至直接拒绝所有未授权请求。
你可以去Firebase控制台的「Firestore → 规则」页面核对：

• 本地测试规则可能是这样：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

• 而部署后如果还是默认规则，就会导致未认证用户读不到数据：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Angular本地开发用的是environment.ts，但部署时默认会用environment.prod.ts。如果这个生产环境配置里的Firebase项目ID、API密钥等信息填错了，或者没同步最新的配置，就会连接到错误的Firestore实例，自然读不到数据。
记得检查angular.json里的生产环境配置是否正确指向environment.prod.ts，并且里面的Firebase参数和本地测试环境一致（或者对应生产环境的专属配置）。

部署后浏览器可能缓存了旧的静态文件，导致代码还是用的旧版Firebase初始化逻辑，或者请求被缓存拦截。
可以试试强制刷新页面（Ctrl+Shift+R），或者确认Angular生产构建时是否给静态资源加了哈希值（CLI默认会做，但偶尔会因为配置问题失效），彻底避免缓存问题。

本地开发时，Firestore会自动弹出提示，告诉你需要创建哪些复合索引，点击链接就能快速生成。但部署后如果你的查询用到了复合索引，而你没在控制台手动创建，就会导致查询失败，数据加载不出来。
打开浏览器开发者工具的「Network」面板，查看Firestore请求的返回信息，有没有索引错误提示；或者直接去Firebase控制台的「Firestore → 索引」页面，看看有没有待创建的索引任务。

虽然Firebase默认配置了跨域，但如果你的项目用了自定义域名，或者浏览器安装了广告拦截、隐私保护类插件，可能会阻止Firestore的请求。
打开开发者工具的「Console」面板，看看有没有CORS相关的报错；或者暂时禁用浏览器插件，测试是否能正常加载数据。

生产构建时Angular会做代码压缩、树摇等优化，有时候可能不小心把Firebase相关的代码摇掉了，或者初始化逻辑的执行顺序在生产环境下出了问题。
检查main.ts里的Firebase初始化代码是不是在Angular启动之前执行的；或者在angular.json里确认Firebase的依赖有没有被正确包含在生产构建中。

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