React Native导航传参显示undefined问题求助

核心问题 #

你遇到的cannot read property 'name' of undefined错误主要来自三个方面：

1. useEffect闭包陷阱：依赖数组为空的useEffect导致内部回调捕获的name始终是初始空值，甚至可能在用户未完成输入时就触发跳转。
2. Firebase初始化重复执行：在组件内部调用initializeApp会导致每次组件渲染都重新初始化Firebase，引发不可预期的行为。
3. Home页面未做容错处理：直接访问route.params.name，未考虑params可能为undefined的情况。

分步修复 #

1. 修复Firebase初始化

将Firebase初始化代码移到组件外部，避免重复初始化：

// Signup.js 顶部
import firebaseConfig from '../firebase';
import {initializeApp} from 'firebase/app';
import {getAuth, createUserWithEmailAndPassword, onAuthStateChanged} from 'firebase/auth';

// 初始化Firebase（仅执行一次）
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 组件代码
const Signup = () => {
  const navigation = useNavigation();
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  
  // ...其他代码
}

2. 修复跳转逻辑与useEffect

移除依赖为空的useEffect，改为在注册成功后手动跳转，同时更新loading状态：

function handleSignUpData() {
  if (!name || !email || !password) {
    alert('请填写所有字段');
    return;
  }
  setLoading(true);
  createUserWithEmailAndPassword(auth, email, password)
    .then(userCredential => {
      // 注册成功后直接跳转，确保传递最新的name
      navigation.navigate('Home', {name: name});
    })
    .catch(error => alert(error.message))
    .finally(() => {
      // 无论成功失败，都停止加载
      setLoading(false);
    });
}

// 若需要监听自动登录（如页面刷新），可保留以下useEffect并处理依赖
useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, user => {
    if (user) {
      // 自动登录时可从Firebase用户信息中获取name（需提前存入displayName）
      navigation.navigate('Home', {name: user.displayName || '访客'});
    }
  });
  
  // 清理订阅，避免内存泄漏
  return unsubscribe;
}, [auth, navigation]);

3. Home页面添加容错处理

直接访问route.params.name会在params不存在时报错，添加可选链或条件判断：

const Home = ({route}) => {
  // 方式1：可选链操作符
  const userName = route.params?.name;
  // 方式2：条件判断
  // const userName = route.params && route.params.name;
  
  console.log(userName);
  
  return (
    <View style={styles.container}>
      <Text>欢迎, {userName || '访客'}!</Text>
    </View>
  );
};

额外优化建议 #

注册时可将用户name存入Firebase用户的displayName，这样自动登录时无需依赖导航参数：

// 引入updateProfile
import {updateProfile} from 'firebase/auth';

// 在createUserWithEmailAndPassword的then中添加：
createUserWithEmailAndPassword(auth, email, password)
  .then(async userCredential => {
    const user = userCredential.user;
    // 更新用户displayName
    await updateProfile(user, {displayName: name});
    navigation.navigate('Home', {name: user.displayName});
  })

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