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

Question

Я пытаюсь войти с помощью телефонного номера в моем приложении с помощью firebase, но у меня возникла проблема с процессом входа в систему.Я не могу войти с помощью телефонного номера в firebase, но если я регистрируюсь с помощью телефонного номера и перенаправляю на домашнюю страницу, он работает правильно.Я использую тот же метод для входа в систему, но у меня возникла проблема, как TypeError: Cannot read property 'uid' of null, но я успешно получил все значения консоли.Я не знаю, в чем здесь проблема.Но эта ошибка отображается 3 раза,

Вот мой код:

    renderLoginButton() {
        if (this.props.loading) {
          return (
            <Spinner size="large" />
          );
        }

        return (
          <Button
          style={{ alignSelf: 'flex-start' }}
            onPress={this.onLoginBtnClicked.bind(this)}
          >
            Login
          </Button>
        );
      }

onLoginBtnClicked () {

    const { contact, password } = this.props;
    const error =  Validator('password', password) ||  Validator('contact', contact);

    if (error !== null) {
      Alert.alert(error);
    } else {
          console.log('else');
        // this.props.loginUser({ contact, password});

        const mobileNo = '+91'+contact;
        firebase.auth().signInWithPhoneNumber(mobileNo)
        .then(confirmResult =>
            console.log(confirmResult),
            curr = firebase.auth(),
            console.log("curr"+JSON.stringify(curr)),
            this.setState({ data: curr}),
            NavigationService.navigate('Home')
        )
        .catch(error => console(error.message) );
    }

}

CustomDrawerComponent.js

    import React, { Component } from 'react';
import { View, Image, Text } from 'react-native';
import { DrawerItems } from 'react-navigation';
import { connect } from 'react-redux';

import { fetchUserDetails } from '../actions';

class CustomDrawerContentComponent extends Component {

  state = {
    uri: '',
    isfailed: ''
  }

  componentWillMount() {
    this.props.fetchUserDetails();
  }

  componentWillReceiveProps(nextProps) {
    let uri = '';
    if (nextProps.ProfilePic !== '') {
      uri = nextProps.ProfilePic;
      this.setState({ uri, isfailed: false });
    } else {
      uri = '../images/ic_person_24px.png';
      this.setState({ uri, isfailed: true });
    }

    this.setState({ uri });
  }

  renderProfileImage() {
    if (!this.state.isfailed) {
      return (
        <Image
          style={styles.profileImageStyle}
          source={{ uri: (this.state.uri) }}
        />
      );
    }
    return (
      <Image
        style={styles.profileImageStyle}
        source={require('../images/ic_person_24px.png')}
      />
    );
  }

  render() {
    console.log('Profile Pic :: ', this.props.ProfilePic);
    return (
      <View style={styles.container}>
        {this.renderProfileImage()}
        <Text style={styles.textStyle}>
          {this.props.name} - {this.props.category}
        </Text>
        <DrawerItems {...this.props} />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    paddingLeft: 10
  },
  textStyle: {
    fontSize: 14,
    textAlign: 'left',
    color: '#000000'
  },
  profileImageStyle: {
    alignSelf: 'flex-start',
    marginTop: 16,
    padding: 10,
    width: 40,
    height: 40,
    borderRadius: 75
  }
};

const mapStateToProps = state => {
  const { userprofile } = state;
  return userprofile;
};

export default connect(mapStateToProps, { fetchUserDetails })(CustomDrawerContentComponent);

CallStack:

Answer 1

Почему user возвращается как undefined (или даже null)?

Вы знаете, что зарегистрированный пользователь , вы только что вошли в систему, черт, вы даже можете увидеть объект пользователя в инструментах Chrome Dev.

Тогда почему он по-прежнему возвращает undefined? На это есть прямой ответ.

Вы извлекаете пользовательский объект ДО того объекта готов к использованию.

Теперь это может произойти по нескольким причинам, но если вы будете следовать этим 2 «правилам», вы больше не увидите эту ошибку.

Правило № 1: уберите его из constructor()

Когда у вас есть что-то вроде:

constructor(){
  this.userId = firebase.auth().currentUser.uid
}

Более половины времени загрузки страницы, конструктор будет пытаться получить пользователя до того, как пользователь будет готов, приложение блокирует его, потому что страница загружена не полностью, поэтому вы будете пытаться чтобы получить доступ к UID свойства, которого просто еще нет.

Когда вы полностью загрузите свою страницу, вы можете позвонить, чтобы получить currentUser.uid

Правило № 2: сделайте его наблюдаемым

Существует еще один подход, который вы можете использовать в предыдущем вызове Firebase: firebase.auth (). CurrentUser является синхронным. Вместо этого мы можем сделать его асинхронным, подписавшись на наблюдаемую аутентификацию.

/**
   * When the App component mounts, we listen for any authentication
   * state changes in Firebase.
   * Once subscribed, the 'user' parameter will either be null 
   * (logged out) or an Object (logged in)
   */
  componentDidMount() {
    this.authSubscription = firebase.auth().onAuthStateChanged((user) => {
      this.setState({
        loading: false,
        user,
      });
    });
  }
  /**
   * Don't forget to stop listening for authentication state changes
   * when the component unmounts.
   */
  componentWillUnmount() {
    this.authSubscription();
  }
  render() {
    // The application is initialising
    if (this.state.loading) return null;
    // The user is an Object, so they're logged in
    if (this.state.user) return <LoggedIn />;
    // The user is null, so they're logged out
    return <LoggedOut />;
  }
}

Источник статьи: Почему Firebase возвращает undefined при извлечении uid?

Хорошее руководство для React Native будет здесь: Начало работы с аутентификацией Firebase на React Native Поскольку ваш код не показывал много, я надеюсь, что вы обновите свой вопрос, чтобы показать больше кода, чтобы я мог просмотреть.