React中从Firestore集合获取所有文档时遇权限错误

问题重现 #

我用Firestore官方示例代码获取集合文档，已经完成Firebase和Firestore的配置与导入：

const querySnaphot = await getDocs(collection(db, "Chat"));

querySnaphot.forEach((doc) => {
  console.log(doc.id, "=>", doc.data());
})

但抛出错误：

无法连接Cloud Firestore后端。连接失败1次。最近的错误：FirebaseError: [code=permission-denied]：Cloud Firestore API从未在***项目中使用过，或已被禁用。请访问相关页面启用后重试。如果您刚启用该API，请等待几分钟让设置生效后再重试。这通常表示您的设备当前网络连接不稳定。客户端将进入离线模式，直到成功连接到后端。

解决步骤 #

• 启用Cloud Firestore API：联系项目管理员登录Google Cloud控制台，找到对应项目，搜索并启用Cloud Firestore API。启用后等待5-10分钟，让配置同步到所有系统节点。
• 检查安全规则：如果API已启用仍报错，检查Firestore安全规则。开发环境可临时设置开放规则（上线前必须修改为严格规则）：

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

  发布规则后重新测试代码。
• 验证网络连接：确认设备网络正常，排除防火墙、代理或网络波动导致的连接问题。
• 核对项目配置：确保代码中使用的Firebase配置参数（apiKey、projectId等）与Google Cloud控制台中的目标项目完全一致。

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