未捕获的类型错误：无法读取 null 的属性(读取"uid")：收到此错误，但应用程序工作正常？

Question

我在注销时得到这个错误:(Uncaught TypeError: Cannot read properties of null (reading 'uid')))，但是我的应用程序工作并做我想做的事情。

在我的注销函数中，当用户注销时，我基本上是从数据库中的用户文档中删除API访问令牌，因为令牌不会过期，所以它在登录时添加，并在注销时作为身份验证过程的一部分删除。

如何消除这个错误，有没有别的方法可以让我的代码消除这个错误?

在用户注销后出现此错误是有意义的，因为由于用户不活跃(当前用户)，uid不再可供访问。

非常感谢，下面的代码

import { signOut } from "@firebase/auth";
import { useNavigate } from "react-router";
import { auth, db } from "../../firebase";
import { doc, updateDoc, deleteField } from "firebase/firestore";


export const Logout = () => {
const user = auth.currentUser;
const uid = user.uid;
console.log(uid);
const userRef = doc(db, 'users', uid);
const navigate = useNavigate();

const logoutUser = async () => {
//Deleting mavenlink access token
await updateDoc(userRef, {
accessToken: deleteField()
});
signOut(auth).then(() => {
navigate("/")
})
}
return {logoutUser}
};

对于上下文，下面是app.js中处理认证路由的代码

function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [state, setState] = useState({});
const [user, loading, error] = useAuthState(auth);

//Hook to handle authentication
useEffect(() => {
if (loading) {
// maybe trigger a loading screen
return;
}
if (user && !isAuthenticated){ 
setIsAuthenticated(true);
console.log("logged in");
} else if (!user && isAuthenticated) {
setIsAuthenticated(false);
console.log("logged out");
}
}, [user, loading]);
const unauthenticatedRoutes = useRoutes([
{ path: "/", element: <LoginForm/> },
{ path: "/reset", element: <ResetForm/> },
{ path: "/register", element: <RegisterForm/> },
]);
return (
<AppContext.Provider value={{
isAuthenticated, setIsAuthenticated, 
}}>
<div className="App">
{!isAuthenticated ? <>{unauthenticatedRoutes}</> : <Sidebar/>}
</div>
</AppContext.Provider>
);
}
export default App;

注意:经过认证的路由是在侧边栏组件中定义并呈现的。

Answer 1

您可以添加privateRoutes来解决此问题。我的意思是创建一个文件，在其中指定组件是否应该呈现，或者应该重定向到登录页面的条件。你可以将你的普通路由转换为私有路由。在你的正常路由中包裹私有路由中的元素。当你把你的签出函数作为一个私有组件时，它会把用户重定向到登录页面，因为现在user被删除了，currentUser不再存在。

import React from 'react';
import { Navigate} from 'react-router-dom';
//import user from firebase
export default function PrivateRoute({ children }) {
const { currentUser } = // user imported
return currentUser ? children : <Navigate to="/signin" />;
}