Ionic 6迁移报错：Type 'string'无法赋值给类型'RouterDirection'

问题场景 #

将Ionic 5应用升级到Ionic 6后，触发TypeScript编译错误：

error TS2322: Type 'string' is not assignable to type 'RouterDirection'

问题出在appPages数组中定义的direction为字符串类型，但Ionic 6里[routerDirection]绑定要求的是RouterDirection枚举类型，而非原始字符串。

解决方案 #

方法1：使用RouterDirection枚举（推荐） #

这是最符合Ionic 6类型规范的处理方式：

1. 在组件文件中导入RouterDirection枚举：

import { RouterDirection } from '@ionic/angular';

2. 修改appPages的定义，指定正确类型并使用枚举值替代字符串：

appPages: { title: string; icon: string; url: string; direction: RouterDirection }[] = [
  {
    title: 'Home',
    icon: 'home',
    url: '/private/dashboard',
    direction: RouterDirection.Root,
  },
  {
    title: 'Password',
    icon: 'key',
    url: '/private/user-password',
    direction: RouterDirection.Forward,
  }
];

HTML代码无需修改，保持原绑定逻辑即可。

方法2：通过类型断言转换字符串 #

如果不想引入枚举，也可以用类型断言将字符串转为RouterDirection类型：

方式A：在数组定义时断言

appPages = [
  {
    title: 'Home',
    icon: 'home',
    url: '/private/dashboard',
    direction: 'root' as RouterDirection,
  },
  {
    title: 'Password',
    icon: 'key',
    url: '/private/user-password',
    direction: 'forward' as RouterDirection,
  }
];

方式B：在HTML绑定中断言

修改HTML里的routerDirection绑定：

<ion-item [routerDirection]="p.direction as RouterDirection" [routerLink]="p.url" routerLinkActive="ion-item-active">

原因说明 #

Ionic 6对路由相关类型做了严格规范，routerDirection不再接受原始字符串，而是要求使用包含Root、Forward、Back三个可选值的RouterDirection枚举，以此提升类型安全性，避免拼写错误。

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