React Native转TS时React Navigation v5报navigation不存在错误如何解决

Property 'navigation' does not exist on type 'Omit<{ dispatch(action: Readonly<{ type: string; payload?: object; source?: string; target?: string; }> | ((state: TabNavigationState) => Readonly<...>)): void; ... 8 more ...; dangerouslyGetState(): TabNavigationState<...>; } & ... 10 more ... & StackActionHelpers<...>, "dispatch" | ... 11 more ...'.

原有类型定义存在两处核心错误：

• CompositeNavigationProp仅代表navigation导航对象本身的类型，原有代码直接将该类型作为组件全部入参FavoriteProps的类型，导致TypeScript将整个props对象识别为navigation对象，自然找不到props下的navigation属性
• 没有单独声明route路由对象的类型，TypeScript无法识别组件入参中的route字段

按照React Navigation v5的TypeScript规范，分别定义路由对象、导航对象的类型，再组合为组件完整入参类型即可：

import { RouteProp } from '@react-navigation/native';
import { CompositeNavigationProp, MaterialTopTabNavigationProp, NativeStackNavigationProp } from '@react-navigation/native-stack';

// 定义路由对象类型，因为组件同时被两个Tab复用，使用联合类型适配
type FavoriteRouteProp = RouteProp<FavoritesParamList, "favMovies" | "favSeries">;

// 定义组合导航对象类型，支持嵌套导航跳转的类型校验
type FavoriteNavigationProp = CompositeNavigationProp<
  MaterialTopTabNavigationProp<FavoritesParamList>,
  NativeStackNavigationProp<RootStackParamList>
>;

// 组合为组件完整入参类型
export type FavoriteProps = {
  navigation: FavoriteNavigationProp;
  route: FavoriteRouteProp;
};

修复后可正常访问route.name、route.params等属性，同时支持navigate("Root",{screen:"Something"})这类嵌套导航跳转操作。

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