NextJS 13 SSR页面中如何获取Firestore文档并渲染列表？

你的代码有两个核心问题需要修正，就能正常获取并渲染数据：

1. 让getCustomers返回处理后的数据 #

当前函数仅打印数据但未返回结果，需要修改map逻辑，返回包含文档ID（方便后续操作）和数据的数组：

import { FIREBASE_FIRESTORE } from "../../configuration/firebase";
import { collection, getDocs } from "firebase/firestore";

async function getCustomers() {
  const customersSnapshot = await getDocs(collection(FIREBASE_FIRESTORE, "customer"));
  // 返回包含文档ID和数据的数组
  return customersSnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data()
  }));
}

2. 在页面组件中用await调用异步函数 #

getCustomers是异步函数，直接调用会返回Promise，必须加await才能拿到实际数据：

export default async function CustomersPage() {
  // 加await获取实际的客户数据数组
  const customers = await getCustomers();

  // 渲染客户列表
  return (
    <div className="customers-container">
      <h1>客户列表</h1>
      <ul>
        {customers.map((customer) => (
          <li key={customer.id}>
            <h3>{customer.name}</h3>
            <p>邮箱：{customer.email}</p>
            {/* 根据你的Firestore文档字段渲染对应内容 */}
          </li>
        ))}
      </ul>
    </div>
  );
}

关键说明 #

• Next.js 13的App Router中，页面组件本身可以是异步函数，直接用await处理数据获取是官方推荐的SSR方式。
• 列表项的key使用Firestore文档的id是最佳实践，保证渲染性能和正确性。
• 替换customer.name、customer.email为你Firestore文档中实际存在的字段。

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