如何在react-native-firebase的Firestore快照中同时获取多个引用文档数据

你的问题核心在于异步操作的执行时机，以及React Native Firebase中获取文档的API差异，我来一步步帮你解决：

为什么你的两种方法都失败？ #

1. 第一种await方案：forEach的回调是async函数，但forEach本身不会等待异步操作完成，函数会直接返回空数组——所有await的请求还在后台执行时，data已经被返回了。另外React Native Firebase中，文档引用获取数据用的是.get()方法，而非Web SDK的getDoc()。

2. 第二种.then()方案：异步请求的.then()是在函数返回data之后才执行的，所以外部拿到的是初始的空数组，后续data.push(newItem)的操作不会改变已经返回的数组内容。

正确的实现方式 #

我们需要把整个函数改成异步函数，用Promise.all来等待所有关联文档的请求完成，确保返回的数组包含完整的关联数据：

export const firebasePostLooper = async (snapshot) => {
  // 将snapshot中的文档转为数组，用map生成每个文档的处理Promise
  const postPromises = snapshot.docs.map(async (doc) => {
    let newItem = { id: doc.id, ...doc.data() };

    // 获取作者数据
    if (newItem.author) {
      const authorSnapshot = await newItem.author.get();
      if (authorSnapshot.exists()) {
        newItem.authorData = { userID: authorSnapshot.id, ...authorSnapshot.data() };
      }
    }

    // 获取案例数据（注意你之前的代码把caseData误赋值给了userData，这里修正）
    if (newItem.case) {
      const caseSnapshot = await newItem.case.get();
      if (caseSnapshot.exists()) {
        newItem.caseData = { caseID: caseSnapshot.id, ...caseSnapshot.data() };
      }
    }

    return newItem;
  });

  // 等待所有post的关联数据都获取完成，再返回完整数组
  return await Promise.all(postPromises);
};

使用方式 #

因为现在函数是异步的，所以在onSnapshot中调用时需要用await或者.then()：

// 示例：在组件中使用
import { collection, onSnapshot } from 'firebase/firestore';
import { db } from '../your-firebase-config';

useEffect(() => {
  const unsubscribe = onSnapshot(collection(db, 'posts'), async (snapshot) => {
    const fullPosts = await firebasePostLooper(snapshot);
    // 这里fullPosts就是包含authorData和caseData的完整帖子数组
    console.log(fullPosts);
    // 可以把fullPosts设置到state中
    // setPosts(fullPosts);
  });

  return unsubscribe;
}, []);

关键说明 #

• snapshot.docs.map会为每个帖子生成一个异步处理的Promise，Promise.all会等待所有Promise完成后，返回一个包含所有结果的数组。
• 这样就能保证函数返回时，所有关联的author和case数据都已经被获取并添加到对应的post对象中。

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