使用react-firebase-hooks时Firebase查询返回undefined/空数组问题

核心问题定位 #

• 权限问题已解决：最初返回undefined是因为Firestore默认规则拒绝读写，修改规则后权限问题消除，现在返回空数组说明查询逻辑或数据结构存在问题。
• 查询条件不匹配：代码中使用dataRef.orderBy('createdAt')排序，但你的ListItem集合文档里没有createdAt字段，导致查询无法匹配到预期数据；如果不需要排序，直接去掉orderBy即可，若需要排序，得给每个文档添加createdAt字段（比如用firebase.firestore.FieldValue.serverTimestamp()生成）。
• useCollectionData参数误用：{idField: 'checked'}是错误用法，idField的作用是把Firestore文档ID映射到返回数据的指定字段名（比如{idField: 'id'}会让每个返回项多一个id字段存文档ID），你的checked是文档内的普通字段，不需要在这里配置。

修正后的代码示例 #

function GrabData(){
  const dataRef = firestore.collection('ListItem')
  // 方案1：不需要排序的话直接用集合引用
  const query = dataRef; 
  // 方案2：需要排序则确保所有文档都有createdAt字段
  // const query = dataRef.orderBy('createdAt')

  // 正确使用idField（可选，若不需要文档ID可省略该参数）
  const [items, loading, error] = useCollectionData(query, {idField: 'id'});
  
  console.log('加载状态:', loading);
  if (error) console.error('查询错误:', error);
  console.log('返回数据:', items);
  
  // 示例渲染逻辑
  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p>查询失败：{error.message}</p>}
      {items?.map(item => (
        <div key={item.id}>
          状态：{item.checked ? '已勾选' : '未勾选'}
        </div>
      ))}
    </div>
  );
}

额外排查要点 #

• 确认Firebase控制台中ListItem集合下存在包含checked字段的文档，不是空集合。
• 检查字段名拼写：代码中的createdAt、checked要和Firestore文档里的字段名完全一致（大小写敏感）。
• 注意useCollectionData的返回结构：仅返回[数据, 加载状态, 错误对象]，没有第四个snapshot参数，之前的写法是错误的。

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