typescript - React Navigation V5 + Typescript 错误 : Property 'fullName' does not exist on type 'object'

Question

我的目标:

我正在尝试添加 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]);

Answer 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 就会知道您的路由 Prop 中需要哪些参数。

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