传递null时,React上下文API不起作用

我正在为React/Firebase应用程序设置auth,我希望用户的登录/关闭状态为全局状态,这样我就可以根据该状态有条件地呈现某些元素(在任何组件中)。
我从firebase中提取了当前用户状态,并将其设置为上下文,如下所示:

FirebaseContext。js

import { auth } from "./firebaseConfig";
import { createContext } from "react";

export const FirebaseContext = createContext()

const user = auth.currentUser 


const FirebaseContextProvider = (props) => {
        return(
            <FirebaseContext.Provider value = {user}>
                {props.children}
            </FirebaseContext.Provider>
        )
}

export default FirebaseContextProvider

问题是,当用户的状态为注销时 user 传递的值是 null .当我试图解构应用程序时,这会使我的应用程序崩溃 使用者 属性在我使用的任何组件上下文中:

未捕获的TypeError:无法解构(0,react__WEBPACK_IMPORTED_MODULE_0__u.useContext)(…)的属性“user”因为它是空的。

...这里是header组件的第一部分,我使用的是上下文:

import { useContext, useRef } from 'react'
import { FirebaseContext } from '../FirebaseContext';
import { Link } from 'react-router-dom'
import { getAuth, signOut } from "firebase/auth";

const Header = () => {

const { user } = useContext(FirebaseContext)

...以及我如何设置我的应用程序

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Landing from './pages/landing'
import Venue from './pages/venues'
import SignUp from './pages/sign-up';
import Login from './pages/login';
import FirebaseContextProvider  from './FirebaseContext'
import './styles.css';

function App() {
  return (
  <FirebaseContextProvider>
    <Router>
      <div>
        <Routes>
          <Route path = '/' exact element = {<Landing />} />
          <Route path = '/venue/:id' element = {<Venue/>}/>
          <Route path = '/signup' element = {<SignUp/>}/>
          <Route path = '/login' element = {<Login/>}/>
        </Routes>
      </div>
    </Router>
  </FirebaseContextProvider>
  );
}

export default App;

我试着建立一个有条件的 FirebaseContext.js 为了解决这个问题,要返回一个字符串,我将使用该字符串有条件地呈现元素:
const activeUser = user ? user : 'no active user' ,但当它返回时,这并没有起到任何作用 undefined . 有什么建议吗?