在Next.js的getStaticProps中异步获取多个Firestore集合并传参

你的代码主要有两处错误，还有可优化的空间，直接看修复后的代码和说明：

核心问题修正 #

1. Props解构错误：你在HomePage里把props对象当成数组解构了，props是键值对形式的对象，必须用对象解构语法
2. 串行请求效率低下：逐个await请求Firestore集合会导致请求串行执行，改成Promise.all并行请求能大幅缩短数据获取时间
3. 重复代码冗余：处理每个集合文档的逻辑完全一致，抽成复用函数能大幅精简代码

修复后的完整代码 #

// 提取复用的文档处理函数
const processDocs = (docsSnapshot) => {
  return docsSnapshot.docs.map(doc => ({
    ...doc.data(),
    id: doc.id,
    timestamp: doc.data().timestamp?.toDate().getTime()
  }))
}

export async function getStaticProps() {
  // 并行发起所有Firestore请求，提升效率
  const [adminData, featuredData, sidebarData, watchNowData, interviewsData, categoryData, headlinesData] = await Promise.all([
    getDocs(query(collection(db, "admin"))),
    getDocs(query(collection(db, "featured"))),
    getDocs(query(collection(db, "sidebar"))),
    getDocs(query(collection(db, "watchNow"))),
    getDocs(query(collection(db, "interviews"))),
    getDocs(query(collection(db, "category"))),
    getDocs(query(collection(db, "headlines")))
  ])

  // 用复用函数处理所有数据
  const admin = processDocs(adminData)
  const featured = processDocs(featuredData)
  const sidebar = processDocs(sidebarData)
  const watchNow = processDocs(watchNowData)
  const interviews = processDocs(interviewsData)
  const category = processDocs(categoryData)
  const headlines = processDocs(headlinesData)

  return {
    props: {
      admin,
      featured,
      sidebar,
      watchNow,
      interviews,
      category,
      headlines
    },
    // 如果需要自动重新生成页面，可以加上revalidate（可选）
    // revalidate: 60
  }
}

export default function HomePage(props) {
  // 正确的对象解构方式
  const { admin, featured, sidebar, watchNow, interviews, category, headlines } = props

  // 后续渲染逻辑，把数据传给对应组件
  return (
    <div>
      <AdminComponent data={admin} />
      <FeaturedComponent data={featured} />
      {/* 其他组件同理 */}
    </div>
  )
}

额外说明 #

• 如果某些集合的数据获取依赖其他集合的结果（比如需要先拿到admin数据再请求其他），再改回串行await，否则优先用并行请求
• 可选加上revalidate参数，开启Incremental Static Regeneration（ISR），让页面自动更新最新数据
• 确保Firestore的db实例在getStaticProps里已经正确初始化（你之前在useEffect里能正常获取，这部分应该没问题）

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