React Navigation搭配TypeScript时screen参数id不存在报错如何解决

报错原因 #

你已经正确完成了路由参数的全局类型声明，所以跳转时的navigation.navigate能正常校验参数，运行时也能拿到值。报错的核心原因是：useRoute钩子默认无法自动推导当前页面所属的路由类型，会将params默认判定为object类型，自然找不到id属性。

两种修复方法 #

方法1：给useRoute指定泛型（适合需要单独调用useRoute的场景） #

在ChatRoomScreen.tsx中给useRoute传入当前页面对应的路由类型即可：

import { useRoute } from '@react-navigation/native';
import type { RouteProp } from '@react-navigation/native';
import type { RootStackParamList } from './types'; // 导入你定义的路由参数表

const ChatRoomScreen = () => {
  // 泛型传入整个路由参数表，以及当前页面的路由名
  const route = useRoute<RouteProp<RootStackParamList, 'ChatRoom'>>();

  // 此时route.params已经被正确识别为{ id: string }类型，无报错
  const roomId = route.params.id;
  console.log(roomId);

  return (
    // 页面内容
  )
}

方法2：直接使用预定义的屏幕Props（更推荐的规范写法） #

你已经在types.tsx中封装好了RootStackScreenProps工具类型，可以直接用来定义页面组件的Props，不需要手动调用useNavigation/useRoute钩子，导航器会自动传入带正确类型的navigation和route对象：

import type { RootStackScreenProps } from './types';

// 定义当前页面的Props类型
type ChatRoomScreenProps = RootStackScreenProps<'ChatRoom'>;

// 直接从组件Props中解构route
const ChatRoomScreen = ({ route }: ChatRoomScreenProps) => {
  // 自动识别params.id为string类型，无报错
  const roomId = route.params.id;
  console.log(roomId);

  return (
    // 页面内容
  )
}

类型逻辑说明 #

你之前写的RootStackParamList是整个导航栈的参数映射表，声明了每个路由页面对应接收的参数结构：

• 全局声明的namespace ReactNavigation { interface RootParamList extends RootStackParamList {} }是给全局的useNavigation、跳转方法等做类型校验用的，所以你之前跳转时传参没有类型错误。
• 每个页面单独使用useRoute时，TS不知道当前属于哪个路由页面，所以需要手动指定泛型关联到RootStackParamList中对应的条目，才能拿到正确的参数类型。

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