无法在 NextJs 中对数组执行推送

Question

我目前正在开发一个用于学习的社交媒体应用程序，但我陷入了 NextJs 服务器端渲染。

export async function getServerSideProps() {
  const fetchedProjects = []

  const data = onSnapshot(query(collection(db, 'projects')), snapshot => {
    fetchedProjects.push(snapshot.docs[0]);
  })
  data();

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

snapshot.docs[0] 返回一个对象，我试图将它推入 fetchedProjects 数组，但它每次都返回一个空数组。我尝试了多种方法，但它不像使用await onSnapshot。

Answer 1

onSnapshot 将实时侦听器附加到数据库，它首先获取当前数据，然后继续侦听更改。这意味着它可以被多次调用，这就是为什么它不返回承诺并且不能与await 一起使用或作为async 方法的结果：它们都只期望一个结果。

要从async 方法返回结果，请使用getDocs 而不是onSnapshot。

export async function getServerSideProps() {
  const snapshot = await getDocs(query(collection(db, 'projects'));
  const fetchedProjects = [snapshot.docs[0]]

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

另请参阅 getting multiple documents from a collection once 上的 Firebase 文档。