如何解决React Navigation路由TypeScript类型定义及报错问题？

问题现状 #

• 路由数组配置时，ProfileScreen 出现类型错误
• 组件中调用 navigation.navigate 时，无页面名称及参数的类型提示
• 组件不设置 any 类型会触发类型报错

修复步骤 #

1. 修正类型定义文件（types.ts） #

解决拼写错误、修正路由数组类型泛型，确保类型匹配实际场景：

import { 
  StackNavigationProp, 
  StackNavigationState,
  StackNavigationEventMap // 修正拼写错误：StackNavvigationEventMap → StackNavigationEventMap
} from '@react-navigation/stack';
import { 
  RouteProp, 
  StackNavigationOptions, 
  RouteConfig // 导入RouteConfig类型
} from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

// 导航类型：指定当前页面后，navigate自动提示其他页面及参数
export type INavigationType<T extends keyof RootStackParamList> = 
  StackNavigationProp<RootStackParamList, T>;
  
// 路由参数类型：匹配对应页面的参数结构
export type IRouteType<T extends keyof RootStackParamList> =
  RouteProp<RootStackParamList, T>;
  
// 路由数组类型：修正为数组结构，且StackNavigationState使用RootStackParamList
export type IStackRouteType = RouteConfig<
  RootStackParamList,
  keyof RootStackParamList,
  StackNavigationState<RootStackParamList>,
  StackNavigationOptions,
  StackNavigationEventMap
>[];

2. 修正路由数组类型错误（index.tsx） #

确保路由数组类型与定义匹配，同时页面组件已正确声明props类型：

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { IStackRouteType } from './types';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
import Settings from './Settings';

const StackNavigator = createStackNavigator<RootStackParamList>();

// 路由数组类型现在匹配，组件无类型报错
const stackRoutes: IStackRouteType = [
  {
    name: 'Home',
    component: HomeScreen,
    options: { headerShown: false }
  },
  {
    name: 'Profile',
    component: ProfileScreen,
    options: { headerShown: false },
    listeners: () => ({
      state: (e) => console.log('state changed', e.data)
    })
  },
  {
    name: 'Settings',
    component: Settings,
    options: { headerShown: false }
  },
];

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator.Navigator>
        {stackRoutes.map((route) => (
          <StackNavigator.Screen key={route.name} {...route} />
        ))}
      </StackNavigator.Navigator>
    </NavigationContainer>
  );
}

3. 修复组件导航提示（ProfileScreen.tsx） #

修正调用错误，确保navigate获得完整类型提示：

import React, { useEffect } from 'react';
import { Text } from 'react-native';
import { INavigationType, IRouteType } from '../types';

interface IProps {
  route: IRouteType<'Profile'>;
  navigation: INavigationType<'Profile'>;
}

function Profile({ route, navigation }: IProps) {
  // route.params自动提示userId，无类型错误
  const { userId } = route.params;
  
  useEffect(() => {
    // navigate自动提示所有页面名称及对应参数要求
    navigation.navigate('Settings');
    navigation.navigate('Profile', { userId: '123' });
  }, [navigation])

  return <Text>this is Profile page, userId: {userId}</Text>;
}

export default Profile;

关键说明 #

• 拼写修正：修复StackNavigationEventMap的拼写错误，避免类型查找失败
• 路由数组类型：将IStackRouteType定义为数组结构，匹配实际路由列表
• 导航类型泛型：INavigationType<T>指定当前页面后，navigate会自动过滤当前页面，并精准提示其他页面的参数要求
• 组件props：每个页面明确绑定对应页面的路由和导航类型，无需使用any

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