使用useNavigation在非屏幕组件跳转时遇TypeScript类型错误求助

问题原因 #

React Navigation 6.x中，TypeScript无法自动推断非屏幕组件里useNavigation的导航栈类型，导致navigate方法的参数被推断为never，传入屏幕名称时触发类型不匹配错误。

解决方案 #

1. 定义导航栈参数类型 #

在你的导航配置文件（如AppNavigator.tsx）中，明确栈内所有屏幕的名称和参数类型：

import { createStackNavigator } from '@react-navigation/stack';

// 定义栈中所有屏幕的参数类型，无参数则设为undefined
type RootStackParamList = {
  Home: undefined;
  Profile: { userId?: string }; // 可选参数，根据实际需求调整
};

// 创建带类型约束的Stack Navigator
const Stack = createStackNavigator<RootStackParamList>();

// 导航结构示例
export function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

// 导出类型供其他组件使用
export type { RootStackParamList };

2. 在非屏幕组件中指定导航类型 #

在需要跳转的非屏幕组件中，导入定义好的类型并为useNavigation指定泛型：

import { useNavigation } from '@react-navigation/native';
import type { StackNavigationProp } from '@react-navigation/stack';
import type { RootStackParamList } from './AppNavigator';

function NonScreenComponent() {
  // 指定导航类型，让TypeScript识别合法的屏幕名称和参数
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

  const goToProfile = () => {
    // 此时"Profile"会被识别为合法的屏幕名称，无类型错误
    navigation.navigate('Profile');
    // 如果需要传参数，TypeScript会自动提示参数格式：
    // navigation.navigate('Profile', { userId: '123' });
  };

  return <button onClick={goToProfile}>前往个人中心</button>;
}

3. 确保组件在NavigationContainer内部 #

非屏幕组件必须被包裹在NavigationContainer内部，否则useNavigation无法获取导航上下文。如果组件在容器外，需将其移入容器内，或使用NavigationContainerRef实现全局导航（不推荐，优先保证上下文存在）。

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