javascript - 未处理的拒绝（TypeError）：无法读取未定义的属性（读取“onSnapshot”）版本 9

Question

在我的 App.js

componentDidMount() {
this.authListerner = auth.onAuthStateChanged(async userAuth => {
 if (userAuth){
   const userRef = await handleUserProfile(userAuth);
    userRef.onSnapshot(snapshot => {
     this.setState({
       currentUser: {
         id: snapshot.id,
         ...snapshot.data(),
       }
     })
   })
 }
  
 this.setState({
   ...initialState
 });
});
}

我的utilis.js

export const handleUserProfile = async ({userAuth, additionalData = {}})
=> {
if (!userAuth) {
console.warn("No userAuth provided!");
return;
}
const { uid } = userAuth;
const userRef = doc(collection(firestore, `users/${uid}`));
const snapshot = await userRef.get();
if (!snapshot.exists) {
const { displayName, email } = userAuth;
const timestamp = new Date();
try {
  await userRef.setDoc(firestore, {
    displayName,
    email,
    createdDate: timestamp,
    ...additionalData,
  })
} catch(err) {
  console.warn(err);
}
}
return userRef;
};

谁能帮我这个。我不能让它运行。我正在使用 Firebase Web 版本 9。我尝试使用版本 8 中的简单版本