React Navigation V6中如何用TypeScript为navigate参数添加类型？

问题场景 #

在使用@react-navigation/native@6.1.7版本时，提取并包装useNavigation返回的navigate函数时，尝试用Parameters<typeof navigate>[0]获取参数类型会触发TypeScript错误：

types.d.ts(147, 9): 'name' is declared here.

原代码示例：

const MyScreen = () => {
  const { navigate } = useNavigation();

  const navigateTo = useCallback(
    (navigateOptions: Parameters<typeof navigate>[0]) => {
      // 导航前执行操作
      navigate(navigateOptions); // 此处出现错误
    },
    [navigate]
  );
}

解决方案 #

问题根源是navigate是重载函数，Parameters无法直接正确解析重载类型，可通过以下方式处理：

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

首先明确项目中所有屏幕的参数类型：

// 定义全局导航栈的参数类型
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: { theme: 'light' | 'dark' };
};

2. 为useNavigation指定泛型类型 #

通过传入栈类型，让navigate获得准确的类型约束：

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

const MyScreen = () => {
  // 传入RootStackParamList，明确导航属性的类型
  const { navigate } = useNavigation<NavigationProp<RootStackParamList>>();

  const navigateTo = useCallback(
    // 直接复用navigate的参数类型
    (...args: Parameters<typeof navigate>) => {
      // 导航前执行自定义操作
      navigate(...args);
    },
    [navigate]
  );
}

3. 单独提取参数类型（可选） #

如果需要单独复用navigate的参数类型，可以这样提取：

// 从指定类型的NavigationProp中提取navigate的参数类型
type NavigateParams = Parameters<NavigationProp<RootStackParamList>['navigate']>[0];

// 在包装函数中使用
const navigateTo = useCallback(
  (options: NavigateParams) => {
    navigate(options);
  },
  [navigate]
);

原理说明 #

React Navigation的navigate是重载函数，支持多种调用形式（直接传屏幕名、传包含name和params的对象）。直接使用Parameters<typeof navigate>会因重载导致类型解析混乱，而给useNavigation指定泛型NavigationProp<RootStackParamList>后，TypeScript能正确识别当前导航上下文的navigate类型，进而通过Parameters准确获取参数类型。

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