React Native Navigation TypeScript参数组件类型定义报错求助

问题背景 #

在为PoiDetails组件定义接收参数的Props类型时，出现类型不兼容错误，核心报错为RouteProp<ParamListBase, "PoiDetails">无法匹配自定义的RouteProp类型，本质是路由参数的类型推断异常。

核心原因 #

导航器未正确关联自定义的RootStackParamList类型，且存在@react-navigation/stack与@react-navigation/native-stack的API混用情况，导致类型推断失效。

解决方案 #

1. 统一导航器与Props类型依赖 #

确保使用@react-navigation/native-stack提供的导航器和类型工具，不要混用@react-navigation/stack的API：

// 替换原createStackNavigator导入
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 明确指定导航器的参数列表类型
const Stack = createNativeStackNavigator<RootStackParamList>();

2. 正确定义组件Props类型 #

以下两种方式任选其一即可：

方式一：直接使用NativeStackScreenProps

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { RootStackParamList } from './你的参数列表文件路径';

type PoiDetailsProps = NativeStackScreenProps<RootStackParamList, 'PoiDetails'>;

const PoiDetails = (props: PoiDetailsProps) => {
  // 用可选链处理params可能为undefined的情况
  const placeDetails = props.route.params?.placeDetails;
  // 组件逻辑...
};

方式二：拆分navigation与route类型

import { NativeStackNavigationProp, RouteProp } from '@react-navigation/native-stack';
import { RootStackParamList } from './你的参数列表文件路径';

type PoiNavigationProps = NativeStackNavigationProp<RootStackParamList, 'PoiDetails'>;
type PoiRouteProps = RouteProp<RootStackParamList, 'PoiDetails'>;

type PoiDetailsProps = {
  navigation: PoiNavigationProps;
  route: PoiRouteProps;
};

const PoiDetails = (props: PoiDetailsProps) => {
  // 防御性处理params为空的情况
  const { placeDetails } = props.route.params || {};
  // 组件逻辑...
};

3. 处理参数可选性问题 #

报错中提到undefined无法匹配参数类型，是因为React Navigation允许路由参数为空。可根据业务需求选择处理方式：

• 强制跳转时传参：在调用navigation.navigate时严格传入placeDetails参数，确保参数不为空：

  navigation.navigate('PoiDetails', {
    placeDetails: 你的PlaceDetail数据
  });
  

• 允许参数为空：修改参数列表类型，允许PoiDetails的参数为undefined：

  export type RootStackParamList = {
    // ...其他路由
    PoiDetails: {
      placeDetails: PlaceDetail | null;
    } | undefined;
  };
  

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