Question

希望你们都有美好的一天！这周我开始更多地了解 nextJS，今天，我被这个叫做 SSR 的东西困住了，我知道为什么但是当我传递道具时它总是返回未定义的，似乎它甚至没有填充，但是当我尝试时到console.log，数据在那里

这是我的code

export async function getServerSideProps({ query }) {
  // Fetch data from external API
  try {
    console.log("HEI WE ARE HERE");
    console.log(query.pid);
    const ref = firebase
      .firestore()
      .collection("mycollection")
      .doc(query.pid)
      .get()
      .then((querySnapshot) => {
        const dataX = [];
        if (querySnapshot.exists) {
          dataX.push(querySnapshot.data());
        }
        console.log("CEK DATAX: " + JSON.stringify(dataX));
      })
      .catch((e) => {
        alert(err);
      });
    // Pass data to the page via props
    return { props: { dataX } };
  } catch (err) {
    return { props: {} };
  }
}

这是我的 function Page() 样子

export default function Page({ dataX }) {
  const router = useRouter();
  console.log("CEK PAGE DATAX: " + JSON.stringify(dataX));

如果你在我的 function Page() 中看到，在 console.log 中，这是我浏览器中的结果 [![screentshoot1][1]][1]

和控制台结果在我的 getServerSideProps 看起来像这样 [![screentshoot2][2]][2]

如您所见，在我的 getServerSideProps 中，我的 dataX 不是空的，但是当通过时，它变得未定义 :(

有人请帮忙.. [1]：https://i.stack.imgur.com/d8ply.png [2]：https://i.stack.imgur.com/Fy5ZB.png

Answer 1

我觉得问题是在下面的部分，变量dataX是在Promise回调中定义的，但是你在外层作用域中使用了它。您应该在 dataX 回调中返回 .then(() => {})，最后执行 return { props: { dataX: ref } }; 而不是 return { props: { dataX } };。

const ref = firebase
    .firestore()
    .collection("mycollection")
    .doc(query.pid)
    .get()
    .then((querySnapshot) => {
        const dataX = [];
        if (querySnapshot.exists) {
            dataX.push(querySnapshot.data());
        }
        console.log("CEK DATAX: " + JSON.stringify(dataX));
    })
    .catch((e) => {
        alert(err);
    });
// Pass data to the page via props
return { props: { dataX } };

带有 Firebase/Firestore 的 SSR getServerSideProps NextJS

1 个答案: