页面重新加载后Firestore uid不可用

Question

我导出一个函数，使用uid作为标识符返回firestore数据。但是，重新加载页面后uid不可用，导致无法读取空值错误。我试着研究并发生在显示的onauthstatechange上，但这会导致错误:TypeError:无法读取未定义的属性(读取'indexOf')。谢谢你的帮助。

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {
getAuth, 
onAuthStateChanged } from "firebase/auth";
import { useState, useEffect} from "react";
import { 
getFirestore, 
collection, 
getDocs, 
addDoc, 
setDoc, 
doc } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "AIzaSyCJtckBTE3-ub4JP6NcEJX_PKao7r0YJRw",
authDomain: "dtustudenthub.firebaseapp.com",
projectId: "dtustudenthub",
storageBucket: "dtustudenthub.appspot.com",
messagingSenderId: "400034264848",
appId: "1:400034264848:web:f065a4bb76463063dd5795",
measurementId: "G-M5K2EJKLEL"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const auth = getAuth(app);
const db = getFirestore();

export const GetAppointmentsFromFirebase = () => {
const [user, setUser] = useState({});
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
});
const appointmentColRef = collection(db, 'users', user?.uid, 'appointments');
let [schedulerData, setSchedulerData] = useState([])
useEffect(() => {
getDocs(appointmentColRef)
.then((snapshot) => {
let appointmentData = []
snapshot.docs.forEach((doc) => {
appointmentData.push({ ...doc.data() })
})
setSchedulerData(appointmentData);
console.log(appointmentData)
})
.catch(err => {
console.log(err.message)
})
}, []); 
return schedulerData;
};

Answer 1

理想情况下，您应该只在加载用户状态并在useEffect()中初始化onAuthStateChanged()时运行这些查询。尝试重构代码，如下所示:

export const GetAppointmentsFromFirebase = () => {
const [user, setUser] = useState({});
let [schedulerData, setSchedulerData] = useState([])
useEffect(() => {
onAuthStateChanged(auth, async (currentUser) => {
// Check if currentUser is null
if (currentUser) {
setUser(currentUser);
// Read user ID directly from user object
const appointmentColRef = collection(db, 'users', currentUser.uid, 'appointments');
const snapshot = await getDocs(appointmentColRef)
const data = snapshot.docs.map((d) => ({
id: d.id,
...d.data()
}))
setSchedulerData(data);
console.log(data);
} else {
console.log("No user logged in")
}
});
}, []);
return schedulerData;
};