React Navigation嵌套导航器TypeScript类型不兼容错误求助

错误根源 #

你遇到的TS类型不匹配问题，核心原因有两个：

1. 导航类型层级错误：EditBlocklistScreen的navigation属性使用了外层BottomTabNavigator的类型，而非当前嵌套的BlocklistStackNavigator专属导航类型，导致TS认为组件要求的props与Stack屏幕提供的props不兼容。
2. 未定义Stack专属参数列表：没有为BlocklistStackNavigator指定明确的ParamList，TS默认使用ParamListBase，无法正确推断每个屏幕的路由参数和导航类型，进而误判组件props应为{}，与你定义的EditBlocklistScreenProps冲突。

分步解决方案 #

1. 定义BlocklistStack的专属参数列表 #

在BlocklistsStackScreens.ts文件中，补充Stack的路由参数类型定义：

// BlocklistsStackScreens.ts
export enum BlocklistsStackScreens {
  MAIN_BLOCKLIST = 'MAIN_BLOCKLIST',
  EDIT_BLOCKLIST = 'EDIT_BLOCKLIST',
  EDIT_PLATFORM_BLOCKLIST = 'EDIT_PLATFORM_BLOCKLIST',
  CREATE_BLOCK_LIST = 'CREATE_BLOCK_LIST',
}

// 定义当前Stack的所有路由参数
export type BlocklistsStackParamList = {
  [BlocklistsStackScreens.MAIN_BLOCKLIST]: undefined; // 无参数
  [BlocklistsStackScreens.EDIT_BLOCKLIST]: { blocklistId: string }; // EDIT页面需要的blocklistId参数
  [BlocklistsStackScreens.EDIT_PLATFORM_BLOCKLIST]: undefined; // 根据实际需求调整
  [BlocklistsStackScreens.CREATE_BLOCK_LIST]: { mode: 'create' }; // 与initialParams对应
};

2. 为BlocklistStackNavigator指定参数类型 #

修改Stack导航器的创建代码，绑定刚才定义的BlocklistsStackParamList：

// BlocklistStackNavigator.tsx
import { createStackNavigator } from '@react-navigation/stack';
import { BlocklistsStackScreens, BlocklistsStackParamList } from './screen-lists/BlocklistsStackScreens';
// 保留其他导入

// 指定Stack的参数列表类型
const Stack = createStackNavigator<BlocklistsStackParamList>();

export function BlocklistStackNavigator() {
  return (
    <Stack.Navigator initialRouteName={BlocklistsStackScreens.MAIN_BLOCKLIST}>
      {/* 其他屏幕代码保持不变 */}
      <Stack.Screen
        name={BlocklistsStackScreens.EDIT_BLOCKLIST}
        options={{ headerShown: true }}
        component={EditBlocklistScreen}
      />
      {/* 其他屏幕代码保持不变 */}
    </Stack.Navigator>
  );
}

3. 修正EditBlocklistScreen的props类型 #

更新组件的导航和路由类型，使用当前Stack的专属类型：

// EditBlocklistScreen.tsx
import * as React from 'react';
import { BlocklistForm } from '../shared/BlocklistForm.tsx';
import { RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { BlocklistsStackScreens, BlocklistsStackParamList } from '../../../navigators/screen-lists/BlocklistsStackScreens';

// 正确定义当前屏幕的props类型
export type EditBlocklistScreenProps = {
  navigation: StackNavigationProp<BlocklistsStackParamList, BlocklistsStackScreens.EDIT_BLOCKLIST>;
  route: RouteProp<BlocklistsStackParamList, BlocklistsStackScreens.EDIT_BLOCKLIST>; // Stack会必传route，无需设为可选
};

export function EditBlocklistScreen({
  navigation,
  route,
}: Readonly<EditBlocklistScreenProps>) {
  return (
    <BlocklistForm
      mode="edit"
      navigation={navigation}
      blocklistId={route.params.blocklistId} // 现在可以直接访问，无需可选链
    />
  );
}

4. 可选：统一CreateBlocklistScreen的类型（优化） #

为了类型一致性，同样修正Create页面的导航类型：

// CreateBlocklistScreen.tsx
import * as React from 'react';
import { BlocklistForm } from '../shared/BlocklistForm.tsx';
import { StackNavigationProp } from '@react-navigation/stack';
import { BlocklistsStackScreens, BlocklistsStackParamList } from '../../../navigators/screen-lists/BlocklistsStackScreens';

export function CreateBlocklistScreen({
  navigation,
}: Readonly<{
  navigation: StackNavigationProp<BlocklistsStackParamList, BlocklistsStackScreens.CREATE_BLOCK_LIST>;
}>) {
  return <BlocklistForm mode="create" navigation={navigation} />;
}

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