React 导航错误 - TypeScript - 此表达式不可调用

Question

我正在尝试为升级到 React Navigation 5 时遇到的这个打字稿问题寻找最佳实践。我遇到的错误是

This expression is not callable.
  Each member of the union type '{ <RouteName extends "Stack1Screen1" | "Home">(...args: 
undefined extends SampleParamList1[RouteName] ? [RouteName] | [RouteName, 
SampleParamList1[RouteName]] : [...]): void; <RouteName extends "Stack1Screen1" | 
"Home">(route: { ...; } | { ...; }): void; } | { ...; }' has signatures, but none of those 
signatures are compatible with each other.ts(2349)

这是我主要使用的代码：

import { StackScreenProps } from '@react-navigation/stack';

export type SampleParamList1 = {
  Stack1Screen1: undefined;
  Home: undefined;
};
export type SampleParamList2 = {
  Stack2Screen2: undefined;
  Home: undefined;
};

type Props =
  | StackScreenProps<SampleParamList1, 'Stack1Screen1'>
  | StackScreenProps<SampleParamList2, 'Stack2Screen2'>;

const ThisScreen: React.FC<Props> = ({ navigation, route }) => {
  const navToHome = () => navigation.navigate('Home');
};

将鼠标悬停在 navigation.navigate('Home') 函数上会显示错误消息。 关于如何解决这个问题的任何想法？谢谢！ :)

Answer 1

我用过类似的东西。

export type RandomParamList = {
    ScreenRandom1: undefined;
    ScreenRandom2: undefined | { screen: string }; // arguments
    ScreenRandom3: undefined | { screen?: string, params: { param1: string } };
} ;
export type HomeParamList = {
    HomeScreen1: undefined;
    HomeScreen2: undefined | { screen: string };
    HomeScreen3: undefined | { screen?: string, params: { param1: string } };
    HomeScreen4: undefined;
    HomeScreen5: undefined | { screen: string };
} & RandomParamList;

export type HomeNavProps<T extends keyof HomeParamList> = {
    navigation: StackNavigationProp<HomeParamList, T>;
    route: RouteProp<HomeParamList, T>;
};

const ThisScreen: React.FC<HomeNavProps> = ({ navigation, route }) => {
  const navToHome = () => navigation.navigate('HomeScreen1');
const navToHome = () => navigation.navigate('Home'); // you will get error that Home is not allowed
};