React Navigation组件间传参失败：接收参数始终为undefined

1. 确认跳转目标是否匹配嵌套导航层级 #

如果EnteringEmailsScreen属于某个嵌套导航器（比如Stack/Tab Navigator），直接用navigation.navigate('EnteringEmailsScreen', { figure: 8 })会失效——外层导航器无法直接定位到嵌套里的屏幕。正确写法需要先指定嵌套导航器的名称，再传入目标屏幕和参数：

// NewGameScreen中的跳转代码示例
navigation.navigate('嵌套导航器名称', {
  screen: 'EnteringEmailsScreen',
  params: { figure: 8 }
});

比如你的App.js嵌套配置是这样的：

// App.js示例配置
const RootStack = createStackNavigator();
const EmailSubStack = createStackNavigator();

function EmailSubStackScreen() {
  return (
    <EmailSubStack.Navigator>
      <EmailSubStack.Screen name="EnteringEmails" component={EnteringEmailsScreen} />
      {/* 其他嵌套屏幕 */}
    </EmailSubStack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="NewGame" component={NewGameScreen} />
        <RootStack.Screen name="EmailSubStack" component={EmailSubStackScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

那跳转代码就要写成：

navigation.navigate('EmailSubStack', { screen: 'EnteringEmails', params: { figure: 8 } })

2. 检查参数接收的写法 #

确保在EnteringEmailsScreen里正确使用useRoute，并处理参数可能为undefined的场景：

// EnteringEmailsScreen中的参数接收代码
import { useRoute } from '@react-navigation/native';

function EnteringEmailsScreen() {
  const route = useRoute();
  // 用可选链避免直接访问未定义的params导致报错
  const figure = route.params?.figure; 
  
  console.log(figure); // 现在应该能拿到8了
  // ...其他业务逻辑
}

同时注意参数名拼写完全一致——传递的是figure，接收时就不能写成figures或其他错误名称。

3. 核对导航配置的屏幕名称 #

检查App.js中EnteringEmailsScreen对应的name属性，是否和跳转时的screen参数完全匹配（大小写敏感）。比如配置里写的是name="EnteringEmails"，跳转时就不能写成EnteringEmailScreen。

4. 确认导航版本兼容性 #

如果你用的是React Navigation 5+版本，上述写法均有效；若为更旧版本，嵌套导航的传参逻辑会有差异，建议先确认依赖版本是否正确。

内容的提问来源于stack exchange，提问作者Eugene Patrick Doris