TypeScript下React Navigation useRoute访问params属性不存在报错如何解决

方法1：直接给useRoute传入泛型（单次使用） #

首先定义你的路由参数类型：

// 先定义全局根路由参数列表，Key为路由名称，Value为对应路由携带的参数类型
type RootStackParamList = {
  // 替换为你当前页面的路由名称（即Stack.Screen的name属性对应的值）
  IdentificationPage: { 
    identificationUrl: string 
  };
  // 其他路由的参数类型可继续往下补充
};

再从@react-navigation/native导入RouteProp类型，组合出当前路由的专属类型后传给useRoute作为泛型：

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

// 组合当前路由的类型，第二个泛型参数和上面定义的路由名称保持一致
type IdentificationRouteProp = RouteProp<RootStackParamList, 'IdentificationPage'>;

const route = useRoute<IdentificationRouteProp>();
// 现在读取参数不会报错，类型会自动推导为string
const [identificationUrl] = useState(route.params.identificationUrl);

方法2：全局声明默认路由类型（全项目复用） #

如果不想每个页面都手动传泛型，可以给@react-navigation声明全局默认参数类型：

1. 新建全局类型声明文件（如@types/navigation.d.ts），添加以下内容：

import { RootStackParamList } from '你的RootStackParamList定义路径';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

2. 配置完成后，所有页面直接调用useRoute()即可自动匹配当前路由的参数类型，无需额外传泛型：

const route = useRoute();
// 自动识别identificationUrl参数，无类型报错
const [identificationUrl] = useState(route.params.identificationUrl);

额外提示：你也可以用同样的逻辑给useNavigation加类型，只需要把RouteProp换成NavigationProp传入对应泛型即可。

内容的提问来源于stack exchange，提问作者E.D