React+Firestore技术咨询：如何使用Firestore中的引用字段？

Firestore的引用字段（DocumentReference）本质是指向另一个文档的指针，直接从item.data()拿到的只是这个指针对象，无法直接使用目标文档的内容。要获取引用对应的实际数据，需要额外发起请求读取目标文档。结合你的查询逻辑，下面提供两种处理方式：

1. 逐个解析引用（简单直接） #

如果你的账单数据量不大，可以直接在遍历账单时，逐个获取引用指向的文档数据：

export const getBills = async (setBills) => {
  const billsRef = collection(db, `bills`);
  const q = query(billsRef, orderBy("data.date"));
  const { docs } = await getDocs(q);

  // 遍历每个账单，解析引用字段
  const billsWithRefData = await Promise.all(
    docs.map(async (doc) => {
      const billData = doc.data();
      // 替换成你实际的引用字段名，比如myProblemRef
      if (billData.myProblemRef) {
        try {
          const refDoc = await getDoc(billData.myProblemRef);
          if (refDoc.exists()) {
            // 可选：把引用替换为实际数据，或者新增字段存储
            return {
              ...billData,
              myProblemData: refDoc.data() // 保留原引用，新增字段存数据
              // 或者直接替换引用：myProblemRef: refDoc.data()
            };
          } else {
            return { ...billData, myProblemData: null };
          }
        } catch (err) {
          console.error("读取引用文档失败：", err);
          return { ...billData, myProblemData: null };
        }
      }
      return billData;
    })
  );

  setBills(billsWithRefData);
};

2. 批量获取引用（优化性能） #

如果账单数量多，逐个请求会触发大量网络请求（N+1问题），可以先收集所有引用去重，再批量获取，减少请求次数：

export const getBills = async (setBills) => {
  const billsRef = collection(db, `bills`);
  const q = query(billsRef, orderBy("data.date"));
  const { docs } = await getDocs(q);

  // 1. 提取所有有效引用并去重
  const allRefs = [];
  const rawBills = docs.map(doc => doc.data());
  
  rawBills.forEach(bill => {
    // 替换为你实际的引用字段名
    if (bill.myProblemRef) {
      // 用isEqual判断引用是否已存在，避免重复请求
      const isDuplicate = allRefs.some(ref => ref.isEqual(bill.myProblemRef));
      if (!isDuplicate) {
        allRefs.push(bill.myProblemRef);
      }
    }
  });

  // 2. 批量获取所有引用文档
  const refDocs = await Promise.all(
    allRefs.map(ref => getDoc(ref).catch(err => {
      console.error("读取引用失败：", err);
      return null;
    }))
  );

  // 3. 建立引用路径到数据的映射表
  const refDataMap = new Map();
  allRefs.forEach((ref, index) => {
    const doc = refDocs[index];
    if (doc && doc.exists()) {
      refDataMap.set(ref.path, doc.data());
    }
  });

  // 4. 把引用数据合并到账单列表
  const billsWithRefData = rawBills.map(bill => {
    if (bill.myProblemRef) {
      const refData = refDataMap.get(bill.myProblemRef.path);
      return {
        ...bill,
        myProblemData: refData || null
      };
    }
    return bill;
  });

  setBills(billsWithRefData);
};

注意事项 #

• 权限检查：确保当前登录用户拥有读取引用指向文档的Firestore权限，否则会触发权限错误。
• 错误处理：建议给getDoc加上try/catch，避免单个引用读取失败导致整个账单列表加载失败。
• 字段适配：代码中的myProblemRef是示例字段名，需要替换成你实际的引用字段名称。
• 缓存策略：如果数据更新不频繁，可以利用Firestore的本地缓存，或者在React组件中添加缓存逻辑，减少重复请求。

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