React集成Firestore出现failed-precondition错误求助

问题描述 #

在React应用中使用Firebase存储数据，本地模拟器相同配置下运行正常，但发布后出现以下错误：

@firebase/firestore: Firestore (9.12.1): Uncaught Error in snapshot listener: {"code":"failed-precondition","name":"FirebaseError"}

使用了where()子句配合orderBy()，已知需要配置Firestore索引，但集合ID由activeList.id动态生成，无法提前预配置单个集合的索引。

相关业务代码：

useEffect(() => {
    if (activeList === 'null') {
    } else {
      const userRef = collection(database, activeList.id);
      const sort = query(userRef, where("checked", "==", showDoneTodos), orderBy('title', 'asc'))
      const unsubsctibeAllTodos = onSnapshot(sort, (snapshot) => {
        setAllTodos(snapshot.docs.map(doc => ({
          id: doc.data().id,
          title: doc.data().title,
          desc: doc.data().desc,
          checked: doc.data().checked
        })
        ))
      })

      return () => {
        unsubsctibeAllTodos()
      }
    }
  }, [activeList, showDoneTodos])

补充信息：

• activeList是带ID的对象，其ID动态生成，无法提前预配置集合ID
• showDoneTodos为布尔类型变量

解决方案 #

1. 配置集合组索引适配动态集合 #

Firebase支持集合组索引，可通过通配符匹配所有动态生成的集合，步骤如下：

• 打开Firebase控制台，进入Firestore数据库的「索引」页面
• 创建新的集合组索引：
  • 集合组：输入{*}（通用通配符，匹配任意集合名；如果有固定命名模式，比如user_lists_*，也可对应填写）
  • 添加索引字段：先添加checked（排序方向选升序/降序均可，因为是等值匹配），再添加title（排序方向选升序，和代码中的orderBy('title', 'asc')保持一致）
  • 保存索引，等待Firebase完成部署（通常需要几分钟）

2. 检查并调整Firestore安全规则 #

确保安全规则允许访问动态集合，示例规则如下（根据实际业务需求调整权限逻辑）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 匹配所有动态集合下的文档
    match /{dynamicCollection}/{doc} {
      allow read, write: if request.auth != null; // 示例：仅登录用户可读写
    }
  }
}

3. 调试捕获详细错误信息 #

在onSnapshot中添加错误回调，确认错误根源并获取更具体的提示：

const unsubsctibeAllTodos = onSnapshot(sort, 
  (snapshot) => {
    setAllTodos(snapshot.docs.map(doc => ({
      id: doc.data().id,
      title: doc.data().title,
      desc: doc.data().desc,
      checked: doc.data().checked
    })))
  },
  (error) => {
    console.error('快照监听错误详情:', error);
    // 若为索引缺失，错误信息会包含临时创建索引的链接，可用于验证配置是否正确
  }
)

内容的提问来源于stack exchange，提问作者Latent-code