React Native导航传参遇TypeError：route.params.firstName未定义

核心问题分析 #

你遇到的错误是因为FinishScreen尝试读取route.params.firstName时，route.params为undefined——要么是参数没从Conditions页面传递过来，要么是嵌套导航层级里参数传递的路径不对。

分场景解决 #

场景1：非嵌套导航（所有页面在同一个栈） #

假设导航结构是单栈：InitialScreen → ConditionsScreen → FinishScreen

1. InitialScreen传递参数到ConditionsScreen
   确保handleContinue里的导航代码正确携带参数：

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

const InitialScreen = () => {
  const navigation = useNavigation();
  const firstName = 'John'; // 你的实际参数值

  const handleContinue = () => {
    // 跳转时直接携带参数
    navigation.navigate('Conditions', { firstName });
  };

  return <Button title="Continue" onPress={handleContinue} />;
};

2. ConditionsScreen传递参数到FinishScreen
   必须把从InitialScreen接收到的参数，再传递给FinishScreen：

// ConditionsScreen.js
import { useNavigation, useRoute } from '@react-navigation/native';

const ConditionsScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  // 可添加日志排查参数是否正常接收
  console.log('ConditionsScreen params:', route.params);

  const handleGoToFinish = () => {
    // 把当前页面的参数传递给FinishScreen
    navigation.navigate('Finish', { firstName: route.params.firstName });
  };

  return <Button title="Go to Finish" onPress={handleGoToFinish} />;
};

3. FinishScreen安全读取参数
   用可选链操作符避免undefined报错：

// FinishScreen.js
import { useRoute } from '@react-navigation/native';

const FinishScreen = () => {
  const route = useRoute();
  // 可选链+默认值，防止参数不存在时崩溃
  const firstName = route.params?.firstName || 'Guest';

  return <Text>Hello, {firstName}!</Text>;
};

场景2：嵌套导航（FinishScreen在子栈中） #

如果导航结构是嵌套栈，比如：

• 根栈：InitialScreen → ConditionsStack（子栈包含ConditionsScreen和FinishScreen）

1. InitialScreen跳转到嵌套栈的ConditionsScreen
   必须指定子栈名称+目标screen+参数：

// InitialScreen.js
const handleContinue = () => {
  navigation.navigate('ConditionsStack', {
    screen: 'Conditions',
    params: { firstName: 'John' }
  });
};

2. ConditionsScreen跳转到同子栈的FinishScreen
   和非嵌套场景一致，传递接收到的参数即可：

// ConditionsScreen.js
const handleGoToFinish = () => {
  navigation.navigate('Finish', { firstName: route.params.firstName });
};

排查技巧 #

• 在每个页面打印route.params，确认参数在哪个环节丢失
• 检查导航结构的名称是否和navigate里的名称完全一致（大小写敏感）
• 避免直接读取route.params.xxx，始终用可选链route.params?.xxx做安全处理

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