Next.js服务端渲染getServerSideProps中无法向数组执行push操作

问题核心原因 #

• onSnapshot是Firestore的实时监听API，仅会在数据变更时异步触发回调函数，本身不返回Promise，无法通过await等待执行结果。你代码执行到return语句时，回调还未触发，因此数组始终为空。
• 你代码中拿到的data是onSnapshot返回的取消订阅函数，调用data()只会直接停止监听，完全不会获取到数据。

正确实现方案 #

服务端渲染属于一次性获取数据的场景，应该使用Firestore提供的一次性查询API getDocs，它返回标准Promise，可以正常用await等待结果，修正后代码如下：

export async function getServerSideProps() {
  const fetchedProjects = []
  // 用getDocs做一次性查询
  const snapshot = await getDocs(query(collection(db, 'projects')))
  if (snapshot.docs.length > 0) {
    // 如果需要获取文档实际业务字段，改为snapshot.docs[0].data()
    fetchedProjects.push(snapshot.docs[0]);
  }

  return {
    props: {
      projects: JSON.stringify(fetchedProjects)
    }
  }
}

注意：如果要获取文档的实际业务数据，需要调用snapshot.docs[0].data()，直接push DocumentSnapshot实例会导致序列化异常。

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