React Navigation 5 嵌套导航传参params为undefined的解决办法

当前无法获取传参的核心原因是嵌套导航的参数透传逻辑与实际路由层级不匹配：

• Stack导航中name="HomeScreen"的路由节点，绑定的是整个BottomTabNavigator1底部Tab容器，并非开发过程中编写的HomeScreen页面组件
• 登录页执行navigation.navigate('HomeScreen', 参数)时，传入的参数会绑定在Stack层的HomeScreen这个Tab容器节点上，不会自动下沉到Tab容器内部的子页面（即Tab导航中name="Home"对应的Home组件）
• 控制台打印得到的route对象params: undefined，正是这个逻辑的直接表现：Home组件拿到的route是Tab导航分配给它的独立路由对象，无法感知外层Stack节点上存储的参数

方案1：透传外层Stack的参数到Tab内子页面 #

适合需要给整个Tab容器传递公共参数的场景，改法如下：

1. 修改Stack层HomeScreen的渲染方式，接收路由参数后传给Tab容器：

   <Stack.Screen 
     name="HomeScreen" 
     options={{/* 原有页面配置保持不变 */}}
   >
     {(screenProps) => <BottomTabNavigator1 {...screenProps} />}
   </Stack.Screen>
   

2. 在Tab容器内把外层拿到的参数，传给内部的Home页面：

   function BottomTabNavigator1(props) {
     // 从Stack层的路由对象中取出传入的参数
     const passedParams = props.route?.params ?? {}
     return (
       <Tabs.Navigator /* 原有Tab的样式、配置保持不变 */>
         <Tabs.Screen
           name="Home"
           component={HomeScreen}
           options={{/* 原有Tab图标配置保持不变 */}}
           initialParams={passedParams} // 把外层参数绑定到Home页面的路由上
         />
         {/* 其余两个Tab的配置保持不变 */}
       </Tabs.Navigator>
     )
   }
   

   改完后在Home组件里通过route.params就能正常取到登录页传的itemId、otherParam了。

方案2：直接指定嵌套路由跳转，跳过中间容器 #

如果不需要给整个Tab容器传公共参数，只需要让登录页直接跳转到Tab内的Home页面，只需要修改登录页的跳转逻辑，使用嵌套路由跳转语法即可，不需要改动Tab容器的任何代码：

function Login(){
  navigation.navigate('HomeScreen', {
    // 指定跳转到HomeScreen（即Tab容器）下的名为Home的子路由
    screen: 'Home',
    // 直接把参数传递到目标子页面
    params: {
      itemId: 86,
      otherParam: username,
    }
  });
}

• 不同导航层级的路由是独立持有route对象的：Stack层的HomeScreen、Tab层的Home是两个完全独立的路由节点，各自的params不会自动共享
• 接收参数时一定要加兜底逻辑，避免首次进入页面（没有携带跳转参数）时因为params为undefined触发报错，写法参考：

  export default function HomeScreen({ route, navigation }) {
    // 加空值兜底
    const { itemId, otherParam } = route.params ?? {}
    // 后续业务逻辑
  }
  

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