如何获取含其他集合文档引用字段的Firestore子集合数据

原代码存在的问题 #

• 异步函数在forEach中执行时，forEach不会等待异步操作完成，导致无法保证数据处理顺序，也难以将结果统一存入状态用于展示。
• 仅打印了引用文档数据，未将整合后的皮肤数据（包含引用内容）存入状态。
• 未清理onSnapshot的订阅，可能引发内存泄漏。
• 判断Reference字段的方式不够严谨。

修复后的实现 #

首先新增状态存储处理后的皮肤数据：

const [skinData, setSkinData] = useState([]);

然后修改useEffect内的逻辑：

useEffect(() => {
  let unsubscribe;
  if (user) {
    const getData = async () => {
      const userRef = doc(db, "Users", user.uid);
      const docSnap = await getDoc(userRef);
      if (docSnap.exists()) {
        setUserData(docSnap.data());

        const skinCollectionRef = collection(userRef, "skin_collection");
        // 保存订阅函数用于后续清理
        unsubscribe = skinCollectionRef.onSnapshot(async (snapshot) => {
          // 并行处理所有皮肤文档，确保异步操作完成后再更新状态
          const processedSkins = await Promise.all(
            snapshot.docs.map(async (skinDoc) => {
              const skinDocData = skinDoc.data();
              // 处理每个字段，将引用替换为实际文档数据
              const processedFields = await Promise.all(
                Object.entries(skinDocData).map(async ([key, value]) => {
                  // 严谨判断是否为Firestore DocumentReference
                  if (value && typeof value.get === 'function' && typeof value.isEqual === 'function') {
                    const refSnap = await value.get();
                    return [key, refSnap.exists() ? refSnap.data() : null];
                  }
                  return [key, value];
                })
              );
              // 整合为包含文档ID的对象，方便页面渲染
              return {
                id: skinDoc.id,
                ...Object.fromEntries(processedFields)
              };
            })
          );
          setSkinData(processedSkins);
        });
      } else {
        console.log("No such document!");
      }
    };
    getData();
  }

  // 组件卸载时清理Firestore快照订阅
  return () => {
    if (unsubscribe) unsubscribe();
  };
}, [user]);

关键改动说明 #

• 用Promise.all替代forEach，确保所有异步操作完成后再统一更新状态，保证数据完整性。
• 将处理后的皮肤数据（包含文档ID、原字段、引用文档内容）存入skinData状态，可直接用于页面渲染。
• 新增订阅清理逻辑，避免组件卸载后仍监听快照引发内存泄漏。
• 优化Reference字段的判断逻辑，通过检查对象的核心方法确认是否为Firestore引用。
• 移除重复创建的parentDocRef，直接复用已有的userRef，简化代码。

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