SSR getServerSideProps NextJS Firebase/Firestore

Question

希望大家度过愉快的一天！这周我开始学习更多关于 nextJS 的知识，今天，我被这个叫做 SSR 的东西卡住了，我不知道为什么但是当我传递道具时它总是 return 未定义，看起来它甚至没有填充，但是当我尝试 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 回调中定义的，但您在外部作用域中使用了它。你应该 return 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 } };

SSR getServerSideProps NextJS Firebase/Firestore

SSR getServerSideProps NextJS with Firebase/Firestore

firebase

server-side-rendering

next.js