reactjs - 在 react 导航 v5 上使用带有 useRoute 的 typescript

Question

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

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

一切正常，但 linter 突出显示 id和 name出现以下错误。

Property 'id' does not exist on type 'object | undefined

我该如何克服这个问题。

Answer 1

react-navigation导出几个实用程序类型，以使您在使用钩子(Hook)和为自己的组件定义 Prop 时更轻松。它们取决于您首先为导航器定义类型。

假设您有一个包含两个屏幕 A 和 B 的堆栈。首先定义每个屏幕需要哪些参数:

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

用于输入 useRoute在您的屏幕 B 中:

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

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

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

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