Question

我正尝试使用useRoute如下提取参数。

  const route = useRoute();
  const { params } = route;
  const {
   id, name,
  } = params;

一切正常，但短绒棉袜突出显示id和name并出现以下错误。

类型'object |不存在属性'id'未定义

我该如何克服这个问题。

Answer 1

react-navigation导出了两种实用程序类型，使您在使用挂钩和为自己的组件定义道具时更加轻松。它们取决于您首先为导航器定义类型。

让我们说您有一个带有两个屏幕的堆栈，分别是A和B。首先定义每个屏幕需要使用哪些参数：

type StackParamsList = {
  A: undefined;
  B: {
    id: string;
    name: string;
  };
}

在屏幕B中输入useRoute：

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

const route = useRoute<RouteProp<StackParamsList, 'B'>>();

route.params.id // OK
route.params.foo // error

请查看react-navigation文档中的Type checking with Typescript文章，以获取更多详细信息和键入导航堆栈其他元素的示例。

在React Navigation v5上将typescript与useRoute一起使用

1 个答案: