React中useEffect未触发时如何控制Navbar按登录状态显隐

实现目标：当user不为null时展示Navbar组件，开发时使用了useEffect和useState Hook实现逻辑，但站点加载完成、user已不再为null时useEffect并未正常触发，无法实现预期效果。

问题相关代码如下：

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import { useState, useEffect } from 'react';
import { auth } from "./components/LoginForm/firebase.js";

function App() {
  const user = auth.currentUser

  const [Navbarshow, setNavbar] = useState(false)

  useEffect(() => {
    if (!user === null) {
      setNavbar(true)
    }
  }, [user])

  return (
    <div className="App">
      <Router>
        {Navbarshow ? <Navbar /> : null}
        <button onClick={() => console.log(Navbarshow, user)}>Test</button>

以上是App.js的部分代码，为问题所在位置

• auth.currentUser不是响应式值：Firebase Auth初始化是异步过程，页面首次加载时auth.currentUser默认值为null，直接将其赋值给组件内常量后，后续鉴权状态完成更新时，组件无法感知到这个值的变化，不会触发重渲染，依赖[user]的useEffect自然也不会执行。
• 状态判断逻辑错误：代码中写的!user === null存在逻辑问题，!user会先把user转为布尔值，再拿布尔值和null做相等判断，该表达式永远返回false，永远进不到设置Navbar显示状态的分支。

不要直接读取同步属性auth.currentUser，使用Firebase Auth官方提供的onAuthStateChanged方法监听鉴权状态变化，在回调中同步更新用户状态和Navbar显隐状态，组件卸载时取消监听避免内存泄漏。

修复后的核心代码如下：

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import { useState, useEffect } from 'react';
import { auth } from "./components/LoginForm/firebase.js";

function App() {
  const [user, setUser] = useState(null)
  const [Navbarshow, setNavbar] = useState(false)

  useEffect(() => {
    // 注册鉴权状态监听
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      setUser(currentUser)
      // 直接根据当前用户状态设置Navbar显隐
      setNavbar(!!currentUser)
    })

    // 组件卸载时取消监听
    return () => unsubscribe()
  }, [])

  return (
    <div className="App">
      <Router>
        {Navbarshow ? <Navbar /> : null}
        <button onClick={() => console.log(Navbarshow, user)}>Test</button>
        {/* 原有Routes、Route等代码保持不变即可 */}
      </Router>
    </div>
  )
}

补充说明：不需要额外编写依赖user的useEffect来设置Navbar显隐，在鉴权回调中同步更新状态即可，能减少不必要的组件重渲染。

内容的提问来源于stack exchange，提问作者Ivanoio