Информация пользователя теряется после обновления страницы (Firebase + React)

Question

Я пытаюсь создать панель навигации.Когда пользователь не вошел в систему, он видит панель навигации только с заголовком страницы.Когда пользователь входит в систему, он должен увидеть заголовок, другие страницы, свой адрес электронной почты и кнопку выхода.

Я могу получить адрес электронной почты, но когда я обновляю страницу и нажимаю кнопку выхода, я получаюошибка:

TypeError: Невозможно прочитать свойство 'email' со значением null

Я прилагаю свой код для панели навигации и как я могу это сделать в app.js, ниже.

Я не уверен, как мне решить эту проблему.

NavigationBar.js:

const NavigationBar = ({ authUser }) => (
  <div>{authUser ? <NavigationBarAuth /> : <NavigationBarNonAuth />}</div>
);

const NavigationBarAuth =()=>{
    return (
         ...
         <Grid item xs={3}>
           <div className ="nav-user"> 
               <a className = "font user">{fire.auth().currentUser.email}</a>
           </div>
         </Grid>    
    );

App.js:

 constructor(props) {
    super(props);

    this.state = {
      authUser: null,
      // authUser: JSON.parse(localStorage.getItem('authUser')),
    };
  }
  componentDidMount() {
    this.listener = fire.auth().onAuthStateChanged(
      authUser => {
        authUser
          ? this.setState({ authUser })
          : this.setState({ authUser: null });
      },
    );
  }
 componentWillUnmount() {
    this.listener();
  }
  render() {
    return (
            ...
            <NavigationBar authUser={this.state.authUser} />
    );
  }

Answer 1

После отладки я понял, что проблема была в другом месте. У меня была функция выхода из системы и я вызвал функцию в кнопке onClick. Я неправильно вызвал эту функцию, поэтому функция выхода была запущена и аннулировала пользователя. Спасибо за вашу помощь и усилия.