如何在NextJS 13服务端组件中实现Firebase分页？

因为服务端组件是无状态的，没法直接传递文档快照，我们可以通过传递排序字段值+文档ID的方式，间接实现startAfter()的分页逻辑，全程不用改成客户端组件。

1. 修改产品查询函数 #

更新getProducts，让它支持接收分页起始参数，并返回下一页所需的查询条件：

export async function getProducts(startAfterParams) {
  let q = query(
    collection(db, "products"),
    where("isHidden", "==", false),
    orderBy("createdAt", "desc"),
    limit(12)
  );

  // 如果有分页起始参数，追加startAfter条件
  if (startAfterParams?.lastCreatedAt && startAfterParams?.lastId) {
    q = query(q, startAfter(startAfterParams.lastCreatedAt, startAfterParams.lastId));
  }

  const querySnapshot = await getDocs(q);
  const products = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
  
  // 判断是否还有下一页，同时准备下一页的查询参数
  const hasNextPage = querySnapshot.docs.length === 12;
  const nextPageParams = hasNextPage ? {
    lastCreatedAt: querySnapshot.docs.at(-1).data().createdAt,
    lastId: querySnapshot.docs.at(-1).id
  } : null;

  return { products, hasNextPage, nextPageParams };
}

2. 改造页面组件 #

从URL查询参数中读取分页条件，传给查询函数，并生成分页链接：

export default async function ProductsBikiniPage({ searchParams }) {
  // 解析URL中的分页参数
  const startAfterParams = {
    lastCreatedAt: searchParams.lastCreatedAt ? new Date(searchParams.lastCreatedAt) : undefined,
    lastId: searchParams.lastId
  };

  const { products, hasNextPage, nextPageParams } = await getProducts(startAfterParams);

  return (  
    <main>
      <section>
        {/* 渲染产品列表 */}
        {products.map(product => (
          <div key={product.id}>
            {/* 这里写你的产品展示逻辑 */}
          </div>
        ))}
      </section>
      <section>
        {/* 下一页按钮 */}
        {hasNextPage && (
          <a href={`/?lastCreatedAt=${nextPageParams.lastCreatedAt.toISOString()}&lastId=${nextPageParams.lastId}`}>
            加载下一页
          </a>
        )}
        {/* 返回首页按钮 */}
        {searchParams.lastCreatedAt && (
          <a href="/">返回首页</a>
        )}
      </section>
    </main>
  );
}

核心逻辑说明 #

• 服务端组件无法保存状态，所以我们把startAfter()需要的定位信息（排序字段createdAt+文档ID）通过URL参数传递，替代直接传递文档快照。
• 用文档ID是为了避免多个文档createdAt相同的情况，确保分页的准确性。
• 通过hasNextPage判断是否还有更多数据（当返回的文档数量等于limit值时，说明可能还有下一页）。

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