Typescript 在堆栈之间导航时，反应导航5类型错误

我在使用react navigation 5时遇到一些打字脚本错误。我肯定这是我在如何输入东西/构建应用程序方面犯的错误，但我不确定是什么

我遵循这些文档指南作为起点：

我希望有这样一个应用程序结构：

• 根选项卡导航器
  • 主堆栈
    • 主页
    • 新闻详情页
  • 设置堆栈
    • 设置页面

运行时一切正常，但在尝试从一个堆栈中的页面导航到另一个堆栈中的页面时，我遇到了一些类型的错误，例如从新闻详细信息页面导航到设置页面

这是我目前拥有的代码

import*as React from'React'；
从“react native”导入{按钮、文本、视图}；
从'@react navigation/stack'导入{createStackNavigator，StackNavigationProp}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从'@react导航/core'导入{RouteProp}；
枚举批准{
//主堆栈
HOME=‘HOME’，
新闻详情='NEWS\u DETAILS'，
//设置堆栈
设置='SETTINGS'，
}
类型参数列表={
[批准总部]：未定义；
[批准.新闻/详细信息]：{
id：编号；
};
}
类型设置StackParamList={
[批准设置]：未定义；
}
类型HomeProps={
导航：StackNavigationProp<
本垒打名单，
认可的家
>;
路线:RouteProp ;；
}
键入NewsDetailsProps={
导航：StackNavigationProp<
本垒打名单，
批准。新闻\详细信息
>;
路线:RouteProp ;；
}
类型设置进程={
导航：StackNavigationProp<
设置跟踪参数列表，
批准设置
>;
路线:RouteProp ;；
}
// ----------------------------------------------------------------------------
功能主屏幕（道具：家庭道具）{
const{navigation}=props；
返回(
主屏幕
导航（AppRoute.NEWS_DETAILS，{id:1}）}
/>
navigation.navigate（AppRoute.SETTINGS）}
/>
);
}
功能详情屏幕（道具：NewsDetailsProps）{
返回(
详细信息！{props.route.params.id}
);
}
功能设置屏幕（道具：设置屏幕）{
const{navigation}=props；
返回(
设置屏幕
导航（AppRoute.NEWS_DETAILS，{id:2}）}
/>
);
}
const HomeStack=createStackNavigator（）；
功能屏幕（）{
返回(
);
}
const SettingsStack=createStackNavigator（）；
函数设置StackScreen（）{
返回(
);
}
const Tab=createBottomTabNavigator（）；
类型TabNavigatorProps=React.ComponentProps；
导出常量AppNavigator=（道具：部分）：React.ReactElement=>{
返回(
);
}

这就是我得到的错误：

No overload matches this call.
  Argument of type '[AppRoute.SETTINGS]' is not assignable to parameter of type '[AppRoute.HOME | AppRoute.NEWS_DETAILS] | [AppRoute.HOME | AppRoute.NEWS_DETAILS, { id: number; }]'.
    Type '[AppRoute.SETTINGS]' is not assignable to type '[AppRoute.HOME | AppRoute.NEWS_DETAILS]'.
      Type 'AppRoute.SETTINGS' is not assignable to type 'AppRoute.HOME | AppRoute.NEWS_DETAILS'.
  Overload 2 of 2, '(route: { key: string; params?: { id: number; }; } | { name: AppRoute.HOME | AppRoute.NEWS_DETAILS; key?: string; params: { id: number; }; }): void', gave the following error.
    Argument of type 'AppRoute.SETTINGS' is not assignable to parameter of type '{ key: string; params?: { id: number; }; } | { name: AppRoute.HOME | AppRoute.NEWS_DETAILS; key?: string; params: { id: number; }; }'.ts(2769)

我想我理解为什么会发生这种情况，因为HomeStackParamList中没有定义设置路径。我应该为每个stacks页面参数创建一个联合类型，并在任何地方使用它，这样我就不会有这个错误，还是有更好的方法来构造它

我想我可以创建一个所有参数列表的联合类型，就像这样，但我不确定这是不是正确的方法？大概是这样的：

类型列表={
[批准总部]：未定义；
[批准主页详细信息]：{
id：编号；
};
}
类型设置StackParamList={
[批准设置]：未定义；
}
类型AppStackParamList=HOMSTACKPARAMLIST&SettingsStackParamList；
类型HomeProps={
导航：StackNavigationProp<
AppStackParamList，
认可的家
>;
路线:RouteProp ;；
}
类型DetailsProps={
导航：StackNavigationProp<
AppStackParamList，
批准。主页详细信息
>;
路线:RouteProp ;；
}
类型设置进程={
导航：StackNavigationProp<
AppStackParamList，
批准设置
>;
路线:RouteProp ;；
}

---

如果您能给我提供任何正确方向的帮助建议，我将不胜感激，谢谢您

是的，参数列表的联合对于这个用例来说是很好的