Javascript 除非uid已硬编码，否则firebase不会加载数据

这里发生了奇怪的小事情。我的工作职能是：

import React, { useState } from "react"; 
import firebase from "firebase"; 

const firestore = firebase.firestore(); 

var userID = "xxxxxx"
const ProfilePage = () => { 
const [profileData, setProfileData] = useState(null); 

//Code to run when component mounts 
//that is when page loads 
useEffect(() => { 
firestore 
.collection("profiledata") 
.doc(userID) 
.get() 
.then((doc) => { 
setProfileData(doc.data()); 
}); 
}, []); 

return ( 
<div className="profile"> 
<h1>User</h1> 

{profileData && ( 
//if profileData exist render div 
<div> 
<p> 
First Name : {profiledata.firstname} 
Last Name : {profiledata.lastname} 
Company Name : {profiledata.companyname} 
</p> 
</div> 
)} 
</div> 
); 
}; 

 var userID = ""
firebase.auth().onAuthStateChanged((user) => {
    if(user) {
    //   console.log("profile.js " + user.uid)
    //   userID = user.uid
    userID = user.uid

      console.log("userid inside firebase auth " + user.uid)
  

    }
      })

我还有这个功能：

import React, { useState } from "react"; 
import firebase from "firebase"; 

const firestore = firebase.firestore(); 

var userID = "xxxxxx"
const ProfilePage = () => { 
const [profileData, setProfileData] = useState(null); 

//Code to run when component mounts 
//that is when page loads 
useEffect(() => { 
firestore 
.collection("profiledata") 
.doc(userID) 
.get() 
.then((doc) => { 
setProfileData(doc.data()); 
}); 
}, []); 

return ( 
<div className="profile"> 
<h1>User</h1> 

{profileData && ( 
//if profileData exist render div 
<div> 
<p> 
First Name : {profiledata.firstname} 
Last Name : {profiledata.lastname} 
Company Name : {profiledata.companyname} 
</p> 
</div> 
)} 
</div> 
); 
}; 

 var userID = ""
firebase.auth().onAuthStateChanged((user) => {
    if(user) {
    //   console.log("profile.js " + user.uid)
    //   userID = user.uid
    userID = user.uid

      console.log("userid inside firebase auth " + user.uid)
  

    }
      })

---

它用于获取用户ID，并将其设置为全局变量。我知道它正在工作，因为我可以在屏幕上显示变量，但问题是，它现在不像以前那样在屏幕上显示信息。。。似乎只有在硬编码时才起作用。任何解决方案？

问题很可能是

userID=user.uid

当前在运行

firestore.collection（“profiledata”）.doc（userID）

之后运行。这是因为确定用户的身份验证状态可能需要调用服务器，这是异步进行的

解决方案是在触发

onAuthStateChanged

后构建/重建查询：

var userID = ""
firebase.auth().onAuthStateChanged((user) => {
    if(user) {
        firestore 
        .collection("profiledata") 
        .doc(userID) 
        .get() 
        .then((doc) => { 
            setProfileData(doc.data()); 
        }); 
    }
})

对于刚接触异步云API的开发人员来说，这是一个非常常见的问题，因此我建议花一些时间来研究它