在反应导航 v5 上使用带有 useRoute 的打字稿

【问题标题】：Using typescript with useRoute on react navigation v5在反应导航 v5 上使用带有 useRoute 的打字稿
【发布时间】：2020-07-28 08:18:16
【问题描述】：

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

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

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

类型“object |”上不存在属性“id”未定义

我该如何解决这个问题。

【问题讨论】：

标签： reactjs typescript react-native react-navigation react-navigation-v5

【解决方案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 文章，了解更多详细信息以及键入导航堆栈其他元素的示例。

【讨论】：