使用@react-navigation/compat的react-navigation 5升6报错如何解决

开发者阿泽

2026-10-5

可行解决方案

方案1：类型断言绕过校验

如果验证过代码运行时功能正常，仅TypeScript类型校验报错，直接在报错位置增加as any类型断言即可：

import { createCompatNavigatorFactory } from '@react-navigation/compat';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createCompatNavigatorFactory(createStackNavigator as any)({
  // 此处填写你的页面路由配置
});

方案2：自定义类型声明补全

你可以在项目的全局类型声明文件（通常命名为typings.d.ts或者@types/index.d.ts）中补充@react-navigation/compat针对v6版本的适配类型，示例如下：

declare module '@react-navigation/compat' {
  import type { StackNavigationOptions } from '@react-navigation/stack';
  export function createCompatNavigatorFactory(
    navigator: any
  ): (routeConfig: Record<string, any>) => {
    Navigator: React.ComponentType<any>;
    Screen: React.ComponentType<{
      name: string;
      component: React.ComponentType<any>;
      options?: StackNavigationOptions;
    }>;
  };
}

添加后TypeScript会优先使用你自定义的类型定义，不会再抛出类型错误。