React Native + TypeScript导航参数类型不匹配报错解决方案咨询

算力阿峰

2026-7-7

React Navigation中navigation.navigate TypeScript类型错误的原因与解决方法

报错原因

TypeScript无法识别你的导航栈中包含哪些屏幕，useNavigation()默认返回的导航实例没有绑定具体的栈类型，导致navigate方法的参数被推断为never类型。当你传入字符串'SignIn'时，类型不匹配就会触发这个错误。

虽然代码能正常运行（JavaScript运行时不做类型检查），但这个类型错误会破坏TypeScript的类型提示、自动补全等开发体验，必须修复。

解决方法

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

在你的导航配置文件（比如App.tsx或专门的navigation/types.ts）中，先明确所有屏幕的类型：

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

// 定义导航栈中所有屏幕的参数类型
// 不需要参数的屏幕设为undefined即可
type RootStackParamList = {
  Welcome: undefined;
  SignIn: undefined;
  // 其他屏幕可在此添加，比如SignUp: undefined
};

// 创建带类型的栈导航器
const Stack = createNativeStackNavigator<RootStackParamList>();

2. 在组件中使用带类型的导航实例

回到Welcome组件，为useNavigation指定对应的类型：

import { useNavigation, NavigationProp } from '@react-navigation/native';
// 导入上面定义的RootStackParamList，注意路径要对应你的文件位置
import type { RootStackParamList } from '../path/to/your/navigation/file';

export default function Welcome() {
  // 绑定类型后，TypeScript会识别合法的屏幕名称，还能提供自动补全
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();

  return (
    // ... 你的组件内容
  );
}