React Native父导航向嵌套导航传参时route.params为undefined的问题

问题场景 #

底部导航栏（bottom navigator）中某条路由指向嵌套的栈导航器，调用navigation.navigate('procurar', { id: id, servicoProcurado: categoryName })跳转后，嵌套栈的默认组件SearchServices里的route.params始终为undefined。

根本原因 #

直接导航到嵌套导航器的父路由（如本例中的procurar）时，参数会被传递给父路由组件（StackNavigator），而非嵌套栈的初始页面（SearchServices），因此SearchServices无法直接通过route.params获取到参数。

解决方案 #

方案一：直接导航到嵌套栈的具体页面 #

修改ServiceTile组件中的导航调用，使用React Navigation的嵌套导航语法，直接指定目标页面并传递参数：

// ServiceTile组件的Pressable onPress修改为
<Pressable 
  onPress={() => { 
    console.log("logar clique"); 
    // 嵌套导航语法：父路由名 + {screen: 子页面名, params: 参数}
    navigation.navigate('procurar', { 
      screen: 'listaPrestadores', 
      params: { id: id, servicoProcurado: categoryName } 
    }) 
  }} 
  android_ripple={{ color: "#ccc" }} 
  style={style.pressableButton}
>

方案二：将父路由参数传递给嵌套栈初始页面 #

如果不想修改导航调用，可以在StackNavigator组件中接收父路由的参数，再通过initialParams传递给初始页面：

1. 修改StackNavigator组件，接收route参数并传递给初始页面：

function StackNavigator({ route }: { route: any }) {
  return <stackNavigator.Navigator
    screenOptions={{
      contentStyle: { backgroundColor: '#fff' }
    }}
    initialRouteName='listaPrestadores'
  >
    <stackNavigator.Screen 
      options={{ title: 'Busca de Serviços' }}
      name="listaPrestadores"  
      component={SearchServices}
      initialParams={route.params} // 将父路由参数传给初始页面
    />
    {/* 其他页面配置 */}
  </stackNavigator.Navigator >;
}

2. 修正SearchServices组件的useEffect依赖
   确保参数变化时重新执行数据获取逻辑，将route.params添加到useEffect的依赖数组中：

useEffect(() => {
  const fetchPrestadores = async (id: string) => {
    const resultado = await getPrestadoresServicos(id);
    setPrestadoresServicos(resultado);
  };

  if (route.params !== undefined) {
    const { id, servicoProcurado } = route.params;
    alert(id);
    fetchPrestadores(id.toString()); // 注意id类型转换，确保与接口要求一致
    setSelectedLabel(servicoProcurado); // 可选：同步选中的标签
    setSelectedValue(id.toString()); // 可选：同步选中的value
  }

}, [route.params, selectedValue]); // 添加route.params作为依赖

额外注意事项 #

• 确保参数类型与接口要求匹配（比如id是number，接口可能需要string，需做类型转换）
• 如果使用TypeScript，建议定义路由参数类型，避免类型错误

内容的提问来源于stack exchange，提问作者Diego Alves