Firestore带引用关联的集合查询及关联数据获取实现异常

空数组问题根因 #

问题本质是异步逻辑的等待时序没对齐：

• 现有实现是在遍历事件的同步回调里发起独立的分类异步查询，但整个加载流程没有等待这些分类查询执行完成，就触发了结果数组的赋值/返回
• 数组原生forEach方法本身不会等待内部的异步任务执行完成，跑完同步遍历逻辑就会直接向下执行代码，这时候所有分类查询还没拿到网络返回，结果数组自然是空的。

典型的错误写法参考：

// 错误实现
const loadEvents = async () => {
  const eventsSnapshot = await getDocs(collection(db, 'events'));
  const result = [];
  eventsSnapshot.forEach(doc => {
    // 下面的getDoc是异步的，不会等待结果返回
    getDoc(doc(db, 'categories', doc.data().categoryId)).then(categorySnap => {
      result.push({...doc.data(), category: categorySnap.data()})
    })
  })
  // 执行到这的时候，所有getDoc的异步回调都还没执行，result依然是空数组
  setEvents(result)
}

空数组问题修复方案 #

把逐笔的异步分类查询统一收集成Promise列表，用Promise.all等待所有查询完成后再组装结果、更新React状态，修正后的基础实现示例：

const loadEvents = async () => {
  // 正常拉取全量events集合
  const eventsSnapshot = await getDocs(collection(db, 'events'));
  const eventBaseList = eventsSnapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));

  // 为每个事件生成独立的分类查询Promise
  const assembleTasks = eventBaseList.map(async event => {
    const categorySnap = await getDoc(doc(db, 'categories', event.categoryId));
    // 返回组装完成的带分类信息的事件对象
    return {
      ...event,
      category: categorySnap.exists() ? categorySnap.data() : { name: '未分类', color: '#ccc' }
    }
  });

  // 等待所有组装任务完成，拿到完整列表
  const fullEventList = await Promise.all(assembleTasks);
  // 此时赋值给state就不会出现空数组问题
  setEvents(fullEventList);
}

类似MongoDB populate的优化实现 #

Firestore本身没有内置的跨集合join/populate语法，作为非关系型文档数据库，它的设计核心是优先保障单文档读写性能，不支持服务端关联查询，但可以通过以下方式实现接近populate的开发体验，同时比逐笔查询效率更高：

• 批量拉取分类数据，减少网络请求次数
  拿到所有事件的categoryId后先做去重处理，通过文档ID批量查询一次性拉取所有需要用到的分类数据，在前端生成本地映射表，再遍历事件时直接从映射表读取分类信息，不需要每笔事件单独发起网络请求。示例代码：

  import { query, where, FieldPath } from 'firebase/firestore';
  
  const loadEvents = async () => {
    const eventsSnapshot = await getDocs(collection(db, 'events'));
    const eventBaseList = eventsSnapshot.docs.map(doc => ({id: doc.id, ...doc.data()}));
    // 提取去重后的分类ID列表
    const uniqueCategoryIds = [...new Set(eventBaseList.map(ev => ev.categoryId))];
  
    // 批量查询所有需要的分类（注意：in查询单次最多支持30个ID，超出需要拆分数组）
    const categorySnapshot = await getDocs(
      query(collection(db, 'categories'), where(FieldPath.documentId, 'in', uniqueCategoryIds))
    );
    // 生成本地ID-分类对象的映射表
    const categoryMap = {};
    categorySnapshot.forEach(catDoc => {
      categoryMap[catDoc.id] = catDoc.data();
    });
  
    // 直接本地组装数据，无额外网络请求
    const fullEventList = eventBaseList.map(ev => ({
      ...ev,
      category: categoryMap[ev.categoryId] || { name: '未分类', color: '#ccc' }
    }));
    setEvents(fullEventList);
  }
  

• 冗余字段存储
  如果分类的名称、颜色变更频率很低，可以直接把分类名称、颜色字段冗余存在事件文档里，从根源上避免关联查询——这种方式完全符合Firestore的设计思路，单文档读取即可拿到所有需要的信息，查询性能最高。缺点是分类信息变更时，需要批量更新所有关联的事件文档。

注意事项 #

• Firestore的in条件查询单次最多支持传入30个文档ID，如果去重后的分类ID超过30个，需要拆分成多个长度为30的数组分别发起查询，合并结果后再生成映射表。
• 实时监听场景下不要用逐笔异步查询的方式组装数据，很容易出现列表状态错乱、内容闪烁的问题，优先使用批量查询+本地映射的逻辑。

内容的提问来源于stack exchange，提问作者Thomas Le Naour