在Firebase+Next.js中如何获取用户文档下的集合数组并传为Props？

要获取users集合下所有文档的quiniela子集合数据并作为Props传递，你可以按以下步骤修改代码：

1. 保留用户文档ID #

原代码只提取了文档数据，缺少访问子集合必需的文档ID，先修改用户数据的映射逻辑，把文档ID也包含进去：

export async function getServerSideProps() {
  const snapshot = await firebase
    .firestore()
    .collection("users")
    .orderBy("points", "desc")
    .get();

  // 保留文档ID，后续用于访问子集合
  let users = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data()
  }));

2. 并行获取所有用户的quiniela集合 #

利用Promise.all并行请求所有用户的子集合，避免串行请求导致的性能问题，有两种常用处理方式：

方式一：将所有quiniela数据合并为一个数组 #

如果需要把所有用户的quiniela数据统一存到一个数组中：

// 生成获取每个用户quiniela集合的Promise数组
  const quinielaPromises = users.map(async (user) => {
    const quinielaSnapshot = await firebase.firestore()
      .collection("users")
      .doc(user.id)
      .collection("quiniela")
      .get();
    
    // 返回该用户的quiniela数据，带上用户ID方便关联
    return quinielaSnapshot.docs.map(doc => ({
      userId: user.id,
      ...doc.data()
    }));
  });

  // 等待所有请求完成，用flat()将二维数组转为一维
  const allQuinielas = (await Promise.all(quinielaPromises)).flat();

方式二：将quiniela数据关联到对应用户对象 #

如果需要每个用户数据中包含自己的quiniela集合：

// 遍历用户，为每个用户附加其quiniela数据
  const usersWithQuinielas = await Promise.all(users.map(async (user) => {
    const quinielaSnapshot = await firebase.firestore()
      .collection("users")
      .doc(user.id)
      .collection("quiniela")
      .get();
    
    const quinielas = quinielaSnapshot.docs.map(doc => doc.data());
    return {
      ...user,
      quinielas
    };
  }));

3. 传递Props #

最后将处理好的数据作为Props返回：

// 根据选择的方式返回对应数据
  return {
    props: {
      // 对应方式二
      users: usersWithQuinielas,
      // 或对应方式一
      users,
      allQuinielas
    }
  };
}

注意事项 #

建议添加错误捕获逻辑，避免单个子集合请求失败导致整个页面渲染失败：

try {
  // 所有Firestore请求逻辑
} catch (error) {
  console.error("获取数据失败:", error);
  // 返回错误状态或默认数据
  return { props: { users: [], allQuinielas: [] } };
}

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