react-navigation 5.x：TS2345：“...”类型的参数不可分配给“...”类型的参数答案

【问题标题】：react-navigation 5.x: TS2345: Argument of type ' ... ' is not assignable to parameter of type '... 'react-navigation 5.x：TS2345：“...”类型的参数不可分配给“...”类型的参数
【发布时间】：2020-09-03 01:42:53
【问题描述】：

我已经从 react-navigation 4.x 迁移到 5.x。由于我使用的是 typescript，因此我正在尝试添加类型。我应该提一下，该功能运行良好。但是，我收到了这个打字稿错误：

TS2345: Argument of type '["PaperPlaneDetails", { paperPlane: PaperPlaneInterface; returnRoute: string; }]' is not assignable to parameter of type '["PaperPlaneDetails"] | ["PaperPlaneDetails", undefined]'.   Type '["PaperPlaneDetails", { paperPlane: PaperPlaneInterface; returnRoute: string; }]' is not assignable to type '["PaperPlaneDetails", undefined]'.     Type '{ paperPlane: PaperPlaneInterface; returnRoute: string; }' is not assignable to type 'undefined'.

//OpenPaperPlaneModal.tsx located in ReceivePaperPlaneScreen.tsx

type AppStackParamList = {
  EditProfile: undefined;
  Introduction: undefined;
  PaperPlaneDetails: undefined;
  Logout: undefined;
  DebugScreen: undefined;
  PaperPlane: undefined;
  MyProfileScreen: undefined;
  FollowersScreen: undefined;
  FollowingScreen: undefined;
  UsersProfileScreen: undefined;
  SettingsScreen: undefined;
  CommentsScreen: undefined;
};

type PaperPlaneBottomTabNavigatorParamList = {
  TakePaperPlaneScreen: undefined;
  ReceivePaperPlaneScreen: undefined;
  NotificationScreen: undefined;
};

type OpenPaperPlaneModalNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<
    PaperPlaneBottomTabNavigatorParamList,
    'ReceivePaperPlaneScreen'
  >,
  StackNavigationProp<AppStackParamList>
>;

export default function OpenPaperPlaneModal(props) {
  const navigation = useNavigation<OpenPaperPlaneModalNavigationProp>();
  navigation.navigate('PaperPlaneDetails', {
    paperPlane: props.paperPlane,
    returnRoute: 'ReceivePaperPlaneScreen',
  });
}

    "typescript": '3.8.3'
    "@react-navigation/bottom-tabs": "^5.3.1",
    "@react-navigation/native": "^5.2.1",
    "@react-navigation/stack": "^5.2.16",

【问题讨论】：

为什么有这么多undefined 类型？你的意思是any？
说实话，不确定我的配置是否正确。我应该提到我传递给每个屏幕的参数吗？（我使用route.params 访问的那些）。还是只需要提及initialParams ？
我认为你有语法问题。你不应该能够调用像navigate(args: “something”) 这样的函数，除非这是我不知道的一个新的 TS 特性。我会删除 args: 并重试。
@Amiratak88 功能正常，没有语法错误
@kasra 你能解决这个打字问题吗？

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

【解决方案1】：

@kasra 我能够解决我的问题。确保在路由和 paramList 中没有任何同名的屏幕。

【讨论】：