React Navigation Drawer类型定义正确方式及报错排查

问题重现 #

你的实现代码 #

Drawer导航类型与组件：

export type DrawerNavigatorType = {
  Store: unknown;
  ImagesStudio: { images: string[] };
};

const Drawer = createDrawerNavigator();

const DrawerNavigator = () =>  (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Store"
        component={StoreNavigator}
      />
      <Drawer.Screen
        name="ImagesStudio"
        component={ImageStudioScreen}
      />
    </Drawer.Navigator>
  );

页面组件Props定义：

type Prop = DrawerScreenProps<DrawerNavigatorType, "ImagesStudio">;

const ImageStudioScreen = ({ navigation, route }: Prop) => {
  // 组件逻辑
  return <></>;
};

报错信息 #

Type '({ navigation, route }: Prop) => React.JSX.Element' is not assignable to type 'ScreenComponentType<ParamListBase, "ImagesStudio"> | undefined'.
  Type '({ navigation, route }: Prop) => React.JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'Prop': navigation, routets(2322)
types.d.ts(318, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<ParamListBase, "ImagesStudio", DrawerNavigationState<ParamListBase>, DrawerNavigationOptions, DrawerNavigationEventMap>'

问题原因 #

核心错误是没有给createDrawerNavigator()传入自定义的参数列表类型，导致Drawer导航器默认使用ParamListBase作为参数列表类型。此时Drawer.Screen期望的组件类型是适配ParamListBase的，但你的页面组件声明的Props是基于自定义的DrawerNavigatorType，两者类型不兼容，触发类型检查报错。

修复步骤 #

1. 给Drawer导航器指定自定义参数列表类型 #

在调用createDrawerNavigator时，传入你的DrawerNavigatorType作为泛型参数：

export type DrawerNavigatorType = {
  Store: undefined; // 建议用undefined替代unknown，明确该路由无参数
  ImagesStudio: { images: string[] };
};

// 关键：传入自定义参数列表类型
const Drawer = createDrawerNavigator<DrawerNavigatorType>();

const DrawerNavigator = () =>  (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Store"
        component={StoreNavigator}
      />
      <Drawer.Screen
        name="ImagesStudio"
        component={ImageStudioScreen}
      />
    </Drawer.Navigator>
  );

2. 保持页面组件Props定义（或改用Hooks简化） #

方式一：继续使用Props注入

页面组件的Props定义无需修改，现在类型会自动匹配：

import { DrawerScreenProps } from '@react-navigation/drawer';
import { DrawerNavigatorType } from './path-to-your-drawer-type';

type Prop = DrawerScreenProps<DrawerNavigatorType, "ImagesStudio">;

const ImageStudioScreen = ({ navigation, route }: Prop) => {
  // 安全访问route.params.images
  const { images } = route.params;
  return <div>{/* 组件内容 */}</div>;
};

方式二：用Hooks替代Props注入（更简洁）

如果是函数组件，推荐直接使用useNavigation和useRoute Hooks，无需定义Props类型：

import { useNavigation, useRoute } from '@react-navigation/native';
import type { DrawerNavigationProp } from '@react-navigation/drawer';
import type { DrawerNavigatorType } from './path-to-your-drawer-type';

const ImageStudioScreen = () => {
  const navigation = useNavigation<DrawerNavigationProp<DrawerNavigatorType, "ImagesStudio">>();
  const route = useRoute<{ params: DrawerNavigatorType["ImagesStudio"] }>();
  
  const { images } = route.params;
  return <div>{/* 组件内容 */}</div>;
};

验证修复 #

完成上述修改后，类型检查报错会消失，同时你可以获得完整的类型提示：比如访问route.params时会自动提示images属性，导航跳转时也会校验参数类型。

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