如何解决 javascript (react) 异步组件中的竞争条件

Question

我在我的项目中使用来自 nextjs api 的 getInitialProps 钩子。第一次加载时，它返回数据并显示在浏览器中，但是当我刷新页面时它变为空，并且数据不再显示在浏览器中。

观察：当我刷新账户页面时，数据消失了，然后当我点击导航栏上的“账户”链接到同一页面时，数据出现了。这是一张照片。

此外，prop userInfo 被发送到显示数据的单独组件

[

import {auth} from ...firebase
...
Dashboard.getInitialProps = async (context) => {   
  const userRef = ref(database, "users/" + auth?.currentUser?.uid);   
  const getUser = async () => (await get(userRef)).val();

  const data = await getUser();   
  const userInfo = data;   console.log("user info below");   
  console.log(userInfo);   
  if (!userInfo) return { notFound: true };   
  return {
    props: { userInfo },   
   }; 
  };