React Navigation路由传参出现TypeScript route.params相关错误如何解决

问题原因 #

两个报错的核心诱因都是你对route prop的类型定义完全错误：

• 你手动将route的类型声明为了可选的string类型，所以TS会判定route上不可能存在params属性，触发第二个报错
• 你给route加了可选标记?，所以TS会判定route有可能为undefined，触发第一个报错

修复步骤 #

1. 按React Navigation的规范定义路由参数类型 #

首先定义你的路由栈参数列表，替换成你实际的路由配置即可：

import type { RouteProp } from '@react-navigation/native';

// 全局路由栈参数类型定义
type RootStackParamList = {
  // 这里的Amount是你当前页面在路由配置里的注册名称
  Amount: { 
    trackOriginFlow: string 
  };
  // 其他路由页面的参数也按这个格式补充
};

// 定义当前页面的route类型
type AmountScreenRouteProp = RouteProp<RootStackParamList, 'Amount'>;

2. 修正组件Props的类型定义 #

用上面定义好的route类型替换你自己写的错误类型即可，如果可以确定该页面只会通过路由跳转进入、route一定存在，就不要加可选标记：

interface PixChargeAmountProps {
  route: AmountScreenRouteProp;
}

const Amount: React.FC<PixChargeAmountProps> = ({ route }) => {
  // 这里就不会有类型报错了
  const { trackOriginFlow } = route.params;
}

特殊兼容场景 #

如果确实存在当前页面可能不通过路由跳转渲染、route有可能为空的情况，可以加可选链和默认值兼容：

interface PixChargeAmountProps {
  route?: AmountScreenRouteProp;
}

const Amount: React.FC<PixChargeAmountProps> = ({ route }) => {
  const trackOriginFlow = route?.params?.trackOriginFlow ?? '默认值';
}

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