React Native中用for循环构建Firestore嵌套查询遇渲染错误求解决

你的代码出现Render Error的核心原因是错误使用for...in遍历Firestore查询快照的文档数组，同时变量引用存在问题。for...in用于遍历对象的枚举属性，而snapshot.docs是数组，用它会拿到数组的索引字符串，而非实际的文档快照对象，导致后续调用doc.id等操作抛出错误。

修复后的代码 #

export const getOffers = async (id, uid) => {
  const ref = collection(FIREBASE_FIRESTORE, "venues", id, "offers");
  const q = query(ref, where("active", "==", true));
  const snapshot = await getDocs(q);
  const data = [];

  // 用for...of遍历文档数组，这是处理数组异步循环的正确方式
  for (const docSnap of snapshot.docs) {
    const redemptionRef = doc(
      FIREBASE_FIRESTORE,
      "users",
      uid,
      "redemptions",
      docSnap.id
    );
    const redemptionSnapshot = await getDoc(redemptionRef);
    data.push({
      id: docSnap.id,
      exists: redemptionSnapshot.exists(),
      ...docSnap.data(),
    });
  }
  return data;
};

额外优化建议 #

• 避免变量名重复：原代码重复使用ref变量，虽不报错但可读性差，建议改为redemptionRef这类语义化名称。
• 批量查询提升性能：如果offers数量较多，逐个调用getDoc会产生多次网络请求，可改用getAll批量查询：

export const getOffers = async (id, uid) => {
  const ref = collection(FIREBASE_FIRESTORE, "venues", id, "offers");
  const q = query(ref, where("active", "==", true));
  const snapshot = await getDocs(q);

  // 生成所有需要查询的redemption引用
  const redemptionRefs = snapshot.docs.map(docSnap => 
    doc(FIREBASE_FIRESTORE, "users", uid, "redemptions", docSnap.id)
  );
  // 批量获取所有redemption文档
  const redemptionSnapshots = await getAll(...redemptionRefs);

  // 合并数据返回
  return snapshot.docs.map((docSnap, index) => ({
    id: docSnap.id,
    exists: redemptionSnapshots[index].exists(),
    ...docSnap.data()
  }));
};

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