React Navigation v6+TypeScript：导航函数参数类型指定问题

直接给navigate函数添加泛型约束，就能让routeName和routeParams关联对应路由的类型，实现严格的参数检查：

import { NavigationContainerRef } from '@react-navigation/native';
import React from 'react';

// 你的StackNavigator类型定义
export type StackNavigator = {
  Welcome: undefined;
  Username: undefined;
  Password: undefined;
  ForgotPassword: {id: number};
};

// 先给navigationRef指定正确类型
export const navigationRef = React.createRef<NavigationContainerRef<StackNavigator>>();

// 带类型检查的navigate辅助函数
export function navigate<T extends keyof StackNavigator>(
  routeName: T,
  routeParams?: StackNavigator[T]
) {
  navigationRef.current?.navigate(routeName, routeParams);
}

类型说明： #

• 泛型T约束routeName必须是StackNavigator的键（也就是Welcome/Username/Password/ForgotPassword中的一个）
• routeParams的类型自动关联当前routeName对应的参数要求：
  • 传Welcome/Username/Password时，routeParams只能是undefined（可直接省略）
  • 传ForgotPassword时，routeParams必须是{id: number}类型

调用时TypeScript会自动校验参数合法性，比如：

• 合法调用：navigate('ForgotPassword', {id: 123})
• 非法调用（触发TS报错）：navigate('ForgotPassword') 或 navigate('Welcome', {id: 456})

内容的提问来源于stack exchange，提问作者kashif-sk