TypeScript|Vue3中路由参数为string|string[]类型传参报错解决

Vue Router 默认将所有路由参数route.params下的字段类型推导为string | string[]，这个设计是为了兼容两类路由参数匹配规则：

• 普通单段参数：路由路径定义为/program/:program时，匹配/program/1这类路径，参数值为单个字符串
• 多段通配参数：路由路径定义为/program/:program+时，可匹配/program/1/2/3这类多段路径，参数值为字符串数组

框架无法通过默认类型推导判断当前路由实际使用的匹配规则，所以返回联合类型。直接修改业务函数renderProgramExercises的入参类型为联合类型，属于无意义放宽业务类型约束，会丢失TS类型校验的价值，确实不是合理方案。

不需要修改原有业务函数的入参定义，可根据项目场景选择以下两种合规方案：

方案1：调用处做类型校验/断言（适合快速修复） #

如果确定当前路由是单段参数匹配，参数值一定为字符串，可以直接在传参时做类型断言：

const ProgramForm = () => programStore.renderProgramExercises(route.params.program as string);

如果要加运行时兜底逻辑，避免异常路由场景下传参错误，可以加数组判断：

const rawProgram = route.params.program
// 如果是数组就取第一个值，兜底异常场景
const programId = Array.isArray(rawProgram) ? rawProgram[0] : rawProgram
const ProgramForm = () => programStore.renderProgramExercises(programId);

方案2：声明路由参数类型（推荐长期维护项目使用） #

从路由定义层面给参数声明明确类型，让TS自动推导正确的params类型，后续使用不需要重复做断言：
调用useRoute时传入泛型指定参数类型即可：

// 明确指定当前路由的params类型
const route = useRoute<{ params: { program: string } }>()

// 此时route.params.program的类型自动推导为string，可直接传入函数
const ProgramForm = () => programStore.renderProgramExercises(route.params.program);

如果是路由较多的中大型项目，也可以在路由配置时用as const satisfies RouteRecordRaw写法约束路由配置，配合vue-router的类型工具实现全链路的类型自动推导。

注意：随意修改业务函数的入参类型适配框架默认推导的宽泛类型，会导致后续如果真的传入数组参数时，TS无法提前抛出类型错误，容易引发线上运行时异常。

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