React Native TypeScript 调用 navigation.navigate 传字符串触发 ts(2345) 报错求助

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: never; merge?: boolean; } | { name: never; key?: string; params: never; merge?: boolean; }'.ts(2345)

这个TypeScript报错是因为React Navigation没有获取到你注册的路由页面类型映射，无法校验你传入的"page_2"是合法的路由名称，所以判定你传入的字符串类型不符合参数要求。

• 第一步：定义路由参数列表类型
  新建types/navigation.ts文件，声明你所有路由页面对应的参数类型：

export type RootStackParamList = {
  // 格式为：路由名: 该页面接收的参数类型，无参数填undefined
  page_1: undefined;
  page_2: {
    // 示例参数，按需填写，没有参数直接写undefined即可
    id?: string;
  };
  // 补充所有注册在根导航器的路由
};

• 第二步：全局注册路由类型
  在同个types/navigation.ts文件中添加全局类型声明，让React Navigation自动读取你的路由类型：

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

• 第三步：给导航器绑定类型
  在你初始化导航器的文件中，给createNativeStackNavigator传入定义好的RootStackParamList泛型：

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

// 传入泛型绑定路由类型
const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="page_1" component={Page1} />
      <Stack.Screen name="page_2" component={Page2} />
    </Stack.Navigator>
  );
}

• 可选：页面组件中绑定navigation类型
  如果需要在页面中获取带类型提示的navigation对象，可以按如下方式声明组件props：

import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { RootStackParamList } from '@/types/navigation';

// 第二个参数为当前页面的路由名
type Page1Props = NativeStackScreenProps<RootStackParamList, 'page_1'>;

export default function Page1({ navigation }: Page1Props) {
  // 此时调用navigation.navigate会有自动路由名提示，不会触发类型报错
  return <Button text="go to page 2" onPress={()=>navigation.navigate("page_2")} />
}

配置完成后请确认你调用navigate时传入的路由名，和你在RootStackParamList、Stack.Screen的name属性写的完全一致，包括大小写、下划线等符号。

如果只是临时调试不想配置类型，可以在调用代码上方加// @ts-ignore忽略类型校验，该方法会丢失React Navigation的类型校验能力，不建议长期使用：

<Button 
  text="go to page 2" 
  onPress={()=>{
    // @ts-ignore
    navigation.navigate("page_2")
  }} 
/>

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