Next.js App Router服务端组件获取Firestore数据显示undefined问题

核心问题1：getUsers函数未正确返回数据 #

你的getUsers存在两个关键问题：

• 没有返回Firestore查询的Promise，导致调用时拿到的是undefined
• 使用forEach遍历快照时，内部的return无法收集结果，需要改用map生成数据数组

修正后的getUsers：

export const getUsers = () => {
  // 返回整个Promise链，让调用端能等待数据返回
  return projectFirestore.collection("users").get().then((querySnapshot) => {
    // 用map遍历docs集合，收集每个文档的id和数据
    return querySnapshot.docs.map((doc) => {
      console.log(doc.id, " => ", doc.data());
      return {
        id: doc.id,
        ...doc.data()
      }
    });
  });
}

核心问题2：组件未等待异步函数返回结果 #

BlogPage是async组件，但调用getUsers时没有用await，导致users是未兑现的Promise对象，而非实际数据。

修正后的BlogPage：

const BlogPage = async () => {
  // 用await等待getUsers返回实际数据
  const users = await getUsers();

  console.log(users) // 现在会打印真实的用户数组

  return <main>
    <h5>
      {/* 用join处理数组转字符串，避免页面渲染逗号分隔的列表时出现多余符号 */}
      {users.map((company) => company.companyName).join(', ')}
    </h5> 
    <h1>The Blog</h1>
    <p><Link href="/blog/post-1">Post 1</Link></p>
    <p><Link href="/blog/post-2">Post 2</Link></p>
  </main>
}

补充说明 #

• VS Code控制台能打印数据是因为console.log在服务端执行（服务端组件代码运行在Node环境），浏览器控制台看不到是因为服务端日志不会同步到客户端
• 修正后，服务端组件会在请求阶段等待Firestore数据返回，再渲染完整页面内容

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