即使用户为空，Firebase 用户也会呈现？

Question

大家好，我的代码有一个恼人的问题。我根据用户是否不为 null 在导航栏中呈现用户名和注销按钮，如果它为 null，那么我将呈现登录和注册链接。但问题出现了，它一直说无法读取 null 的属性（读取 'user'），所以如果它为 null，它应该使用登录和注册来呈现导航栏，但它给出了一个错误，任何人都可以解决我的问题.

App.js

import { Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import SignInSide from "./pages/SignIn";
import SignUpSide from "./pages/SignUp";
import SignUpUser from "./pages/SignUpUser";
import AddAdmin from "./pages/AddAdmin";
import Dashboard from "./pages/Dashboard";
import AppAppBar from "./components/AppAppBar";
import withRoot from "./withRoot";
import { UsersContextProvider } from "./global/UsersContext";
import { SellersContextProvider } from "./global/SellersContext";
import { VerifySellersContextProvider } from "./global/VerifySellersContext";
import { RejectSellersContextProvider } from "./global/RejectSellersContext";
import { useEffect, useState } from "react";
import { auth, db } from "../src/config/Config";

function App() {
  //create a state to store user data
  const [userData, setuserData] = useState(null);
  useEffect(() => {
    //check if any change in auth state change
    auth.onAuthStateChanged((user) => {
      if (user !== null) {
        console.log(user);
        db.collection("SignedUpUsersData")
          .doc(user.uid)
          .get()
          .then((snapshot) => {
            //set teh userData STATE
            setuserData({
              user: snapshot.data().Name,
            });
          });
      } else {
        setuserData({
          user: null,
        });
      }
    });
  }, []);

  return (
    <div>
      <RejectSellersContextProvider>
        <VerifySellersContextProvider>
          <SellersContextProvider>
            <UsersContextProvider>
           {/* This is where the user object have been passed and it is navbar */}
              <AppAppBar user={userData} />
              <Switch>
                <Route path="/" exact>
                  <Home />
                </Route>
                <Route path="/dashboard">
                  <Dashboard />
                </Route>
                <Route path="/signin">
                  <SignInSide />
                </Route>
                <Route path="/signup">
                  <SignUpSide />
                </Route>
                <Route path="/signupuser">
                  <SignUpUser />
                </Route>
                <Route path="/addadmin">
                  <AddAdmin />
                </Route>
              </Switch>
            </UsersContextProvider>
          </SellersContextProvider>
        </VerifySellersContextProvider>
      </RejectSellersContextProvider>
    </div>
  );
}

export default withRoot(App);

AppAppBar.js

import * as React from "react";
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import AppBar from "../subcomponents/AppBar";
import Toolbar from "../subcomponents/Toolbar";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { Link as RouterLink } from "react-router-dom";
import { auth } from "../config/Config";
import { useHistory } from "react-router-dom";

const rightLink = {
  fontSize: 16,
  color: "common.white",
  ml: 3,
};
const button = {
  fontSize: 16,
  color: "red",
  ml: 3,
  cursor: "pointer",
};

function AppAppBar({ user }) {
  const history = useHistory();
  const logut = () => {
    auth.signOut().then(() => {
      history.push("/signin");
      console.log("user has singned out");
    });
  };
  console.log(user);
  return (
    <div>
      <AppBar position="fixed">
        <Toolbar
          sx={{ justifyContent: "space-between", backgroundColor: "black" }}
        >
          <Box sx={{ flex: 1, display: "flex", justifyContent: "flex-start" }}>
            <Link
              component={RouterLink}
              to="/"
              variant="h6"
              underline="none"
              color="inherit"
              sx={{ fontSize: 24, color: "white" }}
            >
              {"tenderdash"}
            </Link>
          </Box>
          <Box sx={{ flex: 1, display: "flex", justifyContent: "flex-end" }}>
            <Link
              color="inherit"
              variant="h6"
              underline="none"
              href="/premium-themes/onepirate/sign-in/"
              sx={rightLink}
            >
              {"Products"}
            </Link>
            <Link
              color="inherit"
              variant="h6"
              underline="none"
              href="/premium-themes/onepirate/sign-in/"
              sx={rightLink}
            >
              {"List Equipments"}
            </Link>
            <Link
              color="inherit"
              variant="h6"
              underline="none"
              href="/premium-themes/onepirate/sign-in/"
              sx={rightLink}
            >
              {"Contact Us"}
            </Link>
            {/* if there is not a user */}
            {user.user === null && (
              <div>
                <Link
                  component={RouterLink}
                  to="/signin"
                  color="inherit"
                  variant="h6"
                  underline="none"
                  sx={rightLink}
                >
                  {"SignIn"}
                </Link>
                <Link
                  component={RouterLink}
                  to="/signup"
                  variant="h6"
                  underline="none"
                  sx={rightLink}
                >
                  {"Sign Up"}
                </Link>
              </div>
            )}
            {/* if there is a user */}
            {user.user && (
              <>
                <Link variant="h6" underline="none" sx={rightLink}>
                  {user.user}
                </Link>
                <Link onClick={logut} sx={button} variant="h6">
                  Logout
                </Link>
              </>
            )}
            {/* if the user is admin */}
            {/* <Link
              component={RouterLink}
              to="/dashboard"
              variant="h6"
              underline="none"
              sx={{ ...rightLink, color: "secondary.main" }}
            >
              {"Admin Console"}
            </Link> */}
          </Box>
        </Toolbar>
      </AppBar>
      <Toolbar />
    </div>
  );
}

export default AppAppBar;

Answer 1

当您初始化 userData 时，您正在使用 null 进行初始化，然后在 user.user 行中的组件 AppAppBar 与 null.user，就是这个错误。你应该替换这个：

const [userData, setuserData] = useState(null)

作者：

const [userData, setuserData] = useState({user: null})

即使用户为空，Firebase 用户也会呈现？

Firebase User is rendering even if the user is null?

javascript

firebase

reactjs

firebase-authentication

google-cloud-firestore