TypeError: currentUser is null in firebase react

Question

我发现与我的问题不同的已经回答的问题，但没有帮助。

我使用自定义上下文来调用firebase.auth().onAuthStateChanged()并设置currentUser。

import React, { useState, useEffect } from "react";
import app from "../firebase";
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
useEffect(() => {
app.auth().onAuthStateChanged(setCurrentUser);
}, []);
return (
<AuthContext.Provider value={{ currentUser }}>
{children}
</AuthContext.Provider>
);
};

在我的组件中，我称之为AuthContext和currentUser:

import React, { useContext, useEffect, useState } from "react";
import app from "./firebase";
import { AuthContext } from "./Auth/Auth";
function MyComponent() {
const [invoices, setInvoices] = useState([]);
const { currentUser } = useContext(AuthContext);
const getInvoices = () => {
const database = app.firestore();
const unsubscribe = database
.collection("invoices")
.where("uid", "==", currentUser.uid) // HERE currentUser IS NULL
.orderBy("date", "desc")
.onSnapshot((snapshot) => {
setInvoices(
snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
);
});
return () => {
unsubscribe();
};
};
useEffect(() => {
getInvoices();
}, []);
return (<> ... </>);
}
export default MyComponent;

我认为我的问题与承诺有关，并且用户尚未加载。但我还是不知道在这里该怎么办。

Answer 1

潜在的问题可能是currentUser的值稍后返回，因此您需要在MyComponent组件中添加一个额外的检查。

我将为currentUser添加null检查，并将依赖数组扩展为：

useEffect(() => {
if (currentUser) {
getInvoices();
}
}, [currentUser]);

可能在第一轮中，一旦currentUser仍然是null，useEffect回调就会运行。