如何使用数组过滤器查询Firestore集合 解决查询结果异常问题

现有代码问题说明 #

• 第一种全量拉取后循环调用setInformation的写法：循环内每次取到的information都是effect执行时闭包保存的初始空数组，每次set都是往空数组里加当前遍历到的1条数据，最后一次set会覆盖之前的所有结果，所以最终只会保留1条匹配文档；同时没有状态重置逻辑，重复触发执行时会重复追加已有数据。
• 第二种in操作符的写法属于操作符用错：in用于匹配字段值等于给定列表中任意一个值的场景，查询数组字段是否包含某元素需要用array-contains操作符，这是Firestore专门提供的数组查询语法。

数据库结构参考：

正确实现代码 #

方案1：实时监听（适配onSnapshot实时更新场景） #

useEffect(() => {
  // 直接通过array-contains条件在数据库层面过滤，不需要拉取全量集合到前端手动判断
  const unsubscribe = db.collection('channels')
    .where('users', 'array-contains', user.id)
    .onSnapshot(querySnapshot => {
      // 批量处理所有匹配文档，单次更新状态，避免多次set触发的闭包问题
      const channelList = querySnapshot.docs.map(doc => ({
        id: doc.id,
        data: doc.data()
      }))
      setInformation(channelList)
    })

  // 组件卸载时取消监听，防止内存泄漏
  return () => unsubscribe()
}, [user.id, setInformation])

方案2：一次性获取数据 #

如果不需要实时监听数据变化，用一次性get的写法即可：

const loadingInformation = async () => {
  const querySnapshot = await db.collection('channels')
    .where('users', 'array-contains', user.id)
    .get()
  
  const channelList = querySnapshot.docs.map(doc => ({
    id: doc.id,
    data: doc.data()
  }))
  setInformation(channelList)
}

useEffect(() => {
  loadingInformation();
}, [user.id, loadingInformation])

关键注意点 #

• array-contains查询直接在数据库层完成过滤，相比全量拉取再手动判断性能更高，也不会出现漏匹配问题
• 不要在遍历文档的循环中多次调用状态更新函数，批量处理完所有结果后单次更新状态，彻底解决仅返回1条数据、重复追加的问题
• useEffect依赖数组加入user.id，用户身份切换时会自动重新查询对应数据
• 用onSnapshot做实时监听时，必须在useEffect清理函数中返回unsubscribe方法，避免组件卸载后监听仍然执行导致的异常

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