React Navigation V5 + Typescript 错误：“object”类型上不存在属性“fullName”答案

【问题标题】：React Navigation V5 + Typescript Error: Property 'fullName' does not exist on type 'object'React Navigation V5 + Typescript 错误：“object”类型上不存在属性“fullName”
【发布时间】：2021-01-03 16:46:28
【问题描述】：

我的目标：

我正在尝试添加 Typescript 类型，但遇到了 route.params.fullName 的问题。当我console.log(route.params) 时，对象{ fullName: 'John Smith' } 被记录。为什么 Typescript 与 fullName 存在问题？

奇怪的是代码有效，当我导航到屏幕时，标题标题更新为route.params.fullName。

错误：

Property 'fullName' does not exist on type 'object'.

功能组件：

  // React Hooks: React Navigation
  const route = useRoute();

  // React Hooks: Lifecycle Methods
  useEffect(() => {
    console.log(route.params);

    // React Navigation: Set Options
    props.navigation.setOptions({
      // ISSUE HERE
      title: route.params.fullName,
    });
  }, [props.navigation, route.params]);

【问题讨论】：

这是 react-navigation 的错，他们没有输入 route.params 而是给了它一个 object 类型，这实际上迫使你做你自己的类型断言。

标签： typescript react-native types routes react-navigation

【解决方案1】：

由于您使用的是 React Navigation V5，正如文档中所说，您应该首先定义您的路由堆栈参数列表：

export type RootStackParamList = {
  Home: undefined;
  SomeRouteName: { fullName: string };
  ...
};

然后在创建堆栈导航器时，您应该使用参数列表类型定义：

const Stack = createStackNavigator<RootStackParamList>();

终于在你的屏幕组件中：

import { RootStackParamList } from 'YOUR_ROUTE_STACK_PARAM_LIST_PATH';

type SomeScreenComponentRouteProp = RouteProp<RootStackParamList, 'SomeRouteName'>;

interface Props {
  route?: SomeScreenComponentRouteProp;
}

const SomeScreenComponent:  React.FC<Props> = (props) => {
  ...
}

这样，Typescript 将知道您的路线道具中需要哪些参数。

现在您可以通过props.route.params.fullName 访问您的fullName 参数，而不会出现任何错误或警告。

【讨论】：

【解决方案2】：

使用

let route: any = useRoute();

将解决打字稿问题。

示例：

假设你需要从route params中读取一个名为data的参数，你已经通过了：

navigation.navigate("productDetails",{data: {title: "New Product Title"})

所以在您的productDetails 页面中，您可以这样阅读：

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

let route: any = useRoute();
let data = route.params?.data ? route.params.data : {};

现在您的代码不再存在打字稿问题。

【讨论】：

虽然您的回答可能会解决问题，但 including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。您可以编辑您的答案以添加解释并指出适用的限制和假设。 - From Review

【解决方案3】：

你也可以

import { RootStackParamList } from 'YOUR_ROUTE_STACK_PARAM_LIST_PATH';

type Props =StackScreenProps<RootStackParamList, 'SomeRouteName'>;

const SomeScreenComponent:  React.FC<Props> = (props) => {
  ...
}

这样你就可以直接用 prop 打字了

【讨论】：

【解决方案4】：

@tsomone 答案有效，但更好更快的解决方案，而不是仅仅使用 any 并忽略一切，是这样定义 route 类型：

import {RouteProp, useRoute} from '@react-navigation/native';
...
let route: RouteProp<{params: {fullName: string}}, 'params'> = useRoute();

您将不再收到该错误。

【讨论】：