TypeScript自定义navigate函数参数类型推断异常求助

核心问题分析 #

你当前的问题出在自定义navigate函数时，没有正确将泛型与合并后的AnyParamList做强绑定，导致TypeScript无法关联屏幕名称和对应的参数类型，自然无法实现参数自动推断和错误参数校验。

分步解决方案 #

1. 确保枚举与参数列表的严格对应 #

先补全并规范你的枚举和参数列表定义，保证每个枚举值都在对应的ParamList中有明确的参数类型映射：

// 屏幕枚举
enum OnboardFlowScreens {
  WELCOME = 'WELCOME',
  ONBOARDING = 'ONBOARDING'
}

enum AuthFlowScreens {
  LOGIN = 'LOGIN',
  SIGNUP = 'SIGNUP'
}

// 参数列表接口
interface OnboardFlowParamList {
  [OnboardFlowScreens.WELCOME]: { user: string };
  [OnboardFlowScreens.ONBOARDING]: undefined; // 无参数的屏幕显式设为undefined
}

interface AuthFlowParamList {
  [AuthFlowScreens.LOGIN]: { email: string };
  [AuthFlowScreens.SIGNUP]: { username: string; password: string };
}

// 合并参数列表与屏幕类型
type AnyParamList = OnboardFlowParamList & AuthFlowParamList;
type AllScreens = keyof AnyParamList;

2. 基于React Navigation原生类型实现自定义navigate #

不要自行编写松散的泛型约束，直接复用React Navigation提供的NavigationProp来获取精准的类型关联：

import { NavigationProp, useNavigation } from '@react-navigation/native';

// 自定义navigate hook
const useCustomNavigate = () => {
  const navigation = useNavigation<NavigationProp<AnyParamList>>();

  const navigate = <Screen extends AllScreens>(
    screen: Screen,
    params?: AnyParamList[Screen]
  ) => {
    navigation.navigate(screen, params);
  };

  return { navigate };
};

3. 验证类型推断与错误校验 #

现在调用自定义navigate时，TypeScript会自动关联屏幕与参数类型，错误参数会直接触发类型报错：

const { navigate } = useCustomNavigate();

// 正确：WELCOME对应参数{user: string}
navigate(OnboardFlowScreens.WELCOME, { user: 'John' });

// 错误：ONBOARDING无参数，传入字符串会触发类型报错
navigate(OnboardFlowScreens.ONBOARDING, 'a');

// 正确：LOGIN对应参数{email: string}
navigate(AuthFlowScreens.LOGIN, { email: 'test@example.com' });

// 错误：SIGNUP缺少password参数，触发类型报错
navigate(AuthFlowScreens.SIGNUP, { username: 'testuser' });

关键注意事项 #

• 合并ParamList时，必须保证两个枚举没有重复的屏幕名称，否则会引发类型冲突
• 无参数的屏幕必须显式将参数类型设为undefined，不能省略，否则TypeScript会默认参数为任意可选类型
• 自定义navigate的泛型Screen必须约束为keyof AnyParamList，才能建立屏幕与参数的类型关联

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