Typescript 反应导航V5+；类型脚本错误：属性'；全名'；不存在于类型'；对象'；

我的目标：

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]);

我正在尝试添加Typescript键入，但在

route.params.fullName

方面出现问题。当I

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]);

功能组件：

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 V5，正如文档中所述，您应该首先定义路由堆栈参数列表：

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

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

const Stack = createStackNavigator<RootStackParamList>();

const Stack=createStackNavigator（）；

最后，在屏幕组件中：

import { RootStackParamList } from 'YOUR_ROUTE_STACK_PARAM_LIST_PATH';

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

interface Props {
  route?: SomeScreenComponentRouteProp;
}

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

从'YOUR_ROUTE_STACK_PARAM_LIST_PATH'导入{RootStackParamList}；
键入SomeScreenComponentRouteProp=RouteProp；
界面道具{
路由？：一些屏幕组件RouteProp；
}
const SomeScreenComponent:React.FC=（道具）=>{
...
}

这样，Typescript将知道路由道具中需要哪些参数

---

现在，您可以通过

props.route.params.fullName

访问

fullName

参数，而不会出现任何错误或警告。

请尝试

const-route:any=useRoute（）
此外，您可以

import { RootStackParamList } from 'YOUR_ROUTE_STACK_PARAM_LIST_PATH';

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

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

从'YOUR_ROUTE_STACK_PARAM_LIST_PATH'导入{RootStackParamList}；
类型道具=堆叠屏幕道具；
const SomeScreenComponent:React.FC=（道具）=>{
...
}

通过这种方式，你可以直接使用道具键入
这是react navigation的错，他们没有键入route.params，而是给了它一个
对象
类型，这实际上迫使你自己进行类型断言。虽然你的答案可能会解决这个问题，但如何以及为什么解决这个问题会真正有助于提高你文章的质量，而且可能会得到更多的支持票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。您可以编辑您的答案以添加解释，并指出适用的限制和假设-