如何正确为自定义底部标签栏的route.params配置TypeScript类型

BottomTabBarProps类型默认接收一个ParamList泛型参数，不传时默认值对应的路由params类型为{}，因此TypeScript无法识别你在BottomTabParamList里定义的i18nKey字段。

1. 为所有用到BottomTabBarProps的位置传入你定义的BottomTabParamList作为泛型参数，首先修改自定义TabBar的属性类型：

   // 给BottomTabBarProps绑定自定义参数列表泛型
   type ScreenProps = BottomTabBarProps<BottomTabParamList> & {
       reduxProp1: number;
       reduxProp2: number;
   };
   
   const TabBar = (screenProps: ScreenProps): JSX.Element => {
       return <View>
           {screenProps.state.routes.map((route, index) => {
               // 此处TS会自动识别route.params下存在i18nKey字段，无类型报错
               const { i18nKey } = route.params;
               // 其余标签栏渲染逻辑
               return null;
           })}
       </View>;
   };
   

2. 同步修改导航器中tabBar回调的props类型，保证传参类型匹配：

   <MainAppBottomTabs.Navigator
       initialRouteName="ListScreen"
       screenOptions={{
           headerShown: false
       }}
       // 此处props类型同样绑定泛型
       tabBar={(props: BottomTabBarProps<BottomTabParamList>) => (
           <TabBar
               state={props.state}
               navigation={props.navigation}
               descriptors={props.descriptors}
               insets={props.insets}
               // 需传入定义的两个redux属性，否则会报缺参错误
               reduxProp1={/* 实际redux存储值 */}
               reduxProp2={/* 实际redux存储值 */}
           />
       )}>
       {/* 其余Screen配置保持原有写法即可 */}
   </MainAppBottomTabs.Navigator>
   

配置完成后，TypeScript会根据遍历过程中route.name的取值自动缩窄params的类型，由于你三个路由的params结构完全一致，直接访问route.params.i18nKey不会触发类型错误。

内容的提问来源于stack exchange，提问作者pfinferno