React Native中navigation.navigate报错：Cannot read property 'navigate' of undefined

核心问题分析 #

1. navigation未正确传递/获取：你的loginWithFirebase函数尝试解构{navigation}，但调用onPress={loginWithFirebase}时未传递任何参数，导致navigation为undefined，触发报错。
2. 异步逻辑顺序错误：signInWithEmailAndPassword是异步操作，你在它后面直接判断loggedIn，此时登录请求还未完成，setLoggedIn(true)的状态更新也未生效，这个判断永远不会触发跳转。

具体修复步骤 #

步骤1：确保组件获取到navigation #

如果你的组件是React Navigation的屏幕组件，会自动接收navigation作为props；如果是自定义组件，需要从父组件传递navigation，或使用useNavigation钩子（仅函数组件可用）。

步骤2：修正函数调用与navigation传递 #

方式一：直接在函数中使用组件的navigation（推荐）

类组件：

// 从组件props中获取navigation
loginWithFirebase = () => {
  const { navigation } = this.props;
  // ... 其余代码
}

// 按钮调用
<Button style={styles.button} title="Login" onPress={this.loginWithFirebase} />

函数组件：

import { useNavigation } from '@react-navigation/native';

// 函数组件内直接获取navigation
const navigation = useNavigation();

const loginWithFirebase = () => {
  // ... 其余代码，直接使用navigation变量
}

// 按钮调用
<Button style={styles.button} title="Login" onPress={loginWithFirebase} />

方式二：调用时传递navigation

// 按钮调用时传入当前组件的navigation
<Button style={styles.button} title="Login" onPress={() => loginWithFirebase({ navigation })} />

步骤3：修正异步逻辑，登录成功后直接跳转 #

把navigation.navigate移到signInWithEmailAndPassword的then回调里，确保登录成功后再执行跳转：

signInWithEmailAndPassword(auth, loginEmail, loginPassword)
  .then(() => {
    Alert.alert('User has logged in');
    setLoggedIn(true);
    navigation.navigate('Home'); // 替换为你实际要跳转的页面名称，注意不要跳回Login页
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    if(errorCode === 'auth/wrong-password'){
      Alert.alert('Wrong Password');
    } else {
      Alert.alert(errorMessage);
      console.log(errorMessage);
    }
  });

步骤4：移除无效判断代码 #

删除这段在异步操作完成前就执行的无效代码：

console.log(loggedIn);
if(loggedIn){
  navigation.navigate('Login');
}

完整修复后的函数示例（类组件） #

loginWithFirebase = () => {
  const { navigation } = this.props;
  console.log(loginEmail);
  console.log(loginPassword);
  
  if(loginEmail.length < 4){
    Alert.alert("Please enter a valid email address");
    return;
  }
  if(loginPassword.length <4){
    Alert.alert("Please enter a valid password");
    return;
  }

  signInWithEmailAndPassword(auth, loginEmail, loginPassword)
    .then(() => {
      Alert.alert('User has logged in');
      setLoggedIn(true);
      navigation.navigate('Home'); // 替换为目标页面名称
    })
    .catch((error) => {
      var errorCode = error.code;
      var errorMessage = error.message;
      if(errorCode === 'auth/wrong-password'){
        Alert.alert('Wrong Password');
      } else {
        Alert.alert(errorMessage);
        console.log(errorMessage);
      }
    });
}

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