如何为React Navigation的navigationRef中navigate函数添加TS类型？

你可以通过两种方式给自定义的navigate函数添加正确的TypeScript类型，充分利用你已经定义好的RootStackParamList：

方法一：复用导航引用的自带类型 #

这种方式最简洁，直接复用navigationRef上navigate方法的类型，不需要手动定义额外类型：

// RootNavigation.ts
import { createNavigationContainerRef } from '@react-navigation/native';
// 假设这是你定义的路由参数类型
type RootStackParamList = {
  Home: undefined; // 无参数的路由
  Details: { id: string }; // 带参数的路由
};

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

// 直接复用navigationRef.navigate的类型
export const navigate: typeof navigationRef.navigate = (name, params) => {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
};

// 其他导航函数也可以用同样方式复用类型
export const goBack: typeof navigationRef.goBack = () => {
  if (navigationRef.isReady()) {
    navigationRef.goBack();
  }
};

方法二：手动基于RootStackParamList定义类型 #

如果你想明确看到参数的类型约束，可以手动通过泛型定义导航函数的类型：

// RootNavigation.ts
import { createNavigationContainerRef } from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
};

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

// 定义泛型导航函数类型
type NavigateFunction = <RouteName extends keyof RootStackParamList>(
  name: RouteName,
  params?: RootStackParamList[RouteName]
) => void;

export const navigate: NavigateFunction = (name, params) => {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
};

效果说明 #

两种方式都能实现相同的类型检查效果：

• 调用navigate时，路由名称会被限制为RootStackParamList中定义的键
• 参数类型会自动匹配对应路由的参数要求，比如navigate('Details', { id: '123' })是合法的，而navigate('Details', { wrongKey: 'xxx' })会被TypeScript报错

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