React Navigation 6如何向嵌套导航器传参？报错route.params.data未定义

问题根因 #

你当前的报错核心原因是跳转目标屏幕名称与栈导航器中注册的屏幕名称不匹配，其次是没有做参数为空的兜底兼容。

具体修复步骤 #

• 第一步：校验LiveModeStackNavigator的屏幕注册配置
  你在todo.js中跳转时指定的内部屏幕名为LiveModeAlertOnly，需要确保LiveModeStackNavigator中对应该组件的name属性完全一致，示例配置如下：

// LiveModeStackNavigator 配置示例
import LiveModeAlertsNotifications from './live.js'

const LiveModeStackNavigator = () => {
  return (
    <Stack.Navigator>
      {/* 这里的name必须和navigate时的screen参数完全一致 */}
      <Stack.Screen 
        name="LiveModeAlertOnly" 
        component={LiveModeAlertsNotifications} 
        options={{headerShown: false}}
      />
      {/* 其他屏幕配置 */}
    </Stack.Navigator>
  )
}

• 第二步：给route.params添加空值兜底
  React Navigation 6中页面首次渲染时可能出现route.params未初始化的情况，需要添加兼容逻辑避免直接报错，修改live.js代码如下：

export default function LiveModeAlertsNotifications({ route, navigation }) {
  // 可选链+默认值兜底，避免参数未拿到时报错
  const { data } = route.params ?? {};
  // 或者写法2：const data = route?.params?.data;
  console.info(data);
}

• 第三步：确认传参写法正确性
  你当前todo.js中的传参写法符合React Navigation 6嵌套导航的规范：导航到嵌套导航器时，通过screen指定内部目标屏幕，params指定传递给该屏幕的参数，只要屏幕名称匹配即可正常拿到参数。

验证方式 #

完成上述修改后重新运行项目，跳转后控制台即可正常打印传递的jane参数，不会再出现undefined报错。

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