Не удается получить currentUser в Аутентификации Firebase

Question

Попробуйте просмотреть страницу пользователя /dashboard после проверки подлинности Firebase, но каждый раз, когда возникает ошибка. С root и использования <Link to={"/dashboard"} работает. Но напрямую URL не работает. Заголовок вызывает firebase.currentUser(), но не может.

Ошибка:

TypeError: Невозможно прочитать свойство 'uid' с нулевым значением

Код :

auth. js

class Auth extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (!user) {
        this.props.history.push("/");
      } else {
        this.setState({ loading: false });
      }
    });
  }

  render() {
    return (
      <div>
        {this.state.authenticating ? (
          <div className="loader">
            <Loader loading={this.state.loading} />
          </div>
        ) : (
          this.props.children
        )}
      </div>
    );
  }
}

header. js

class Header extends Component {
  render() {
    const user = firebase.auth().currentUser;
    return (
      <p>{user.uid}</p>
    )
  }
}

приборная панель. js

class Dashboard extends Component {
  render() {
    return (
      <div>
        <Auth>
          <p>Dashboard</p>
        </Auth>
      </div>
    )
  }
}

Answer 1

Из документов :

Примечание: currentUser также может быть нулевым, поскольку объект аутентификации не завершил инициализацию. Если вы используете наблюдателя для отслеживания статуса входа пользователя, вам не нужно обрабатывать этот случай.

Вот почему он выдает ошибку в случае прямых URL, но не иначе. Вы можете обойти это путем условного рендеринга userId в заголовке:

const user = firebase.auth().currentUser;
return user && (
  <p>{user.uid}</p>
)

Это предполагает, что изменение в Аутентификации вызовет повторный рендеринг компонента из одного из более высоких компонентов. Как отмечается в заметке, вы можете использовать обратный вызов onAuthStateChanged, чтобы убедиться, что компонент выполняет рендеринг.

const userContext = useContext(UserContext);

firebase.auth().onAuthStateChanged(user => {
  // Assuming that it has a setUser function
  userContext.setUser(user);
});

и использовать значение из контекста в заголовке.

Документы для контекста