如何将Vue动态路由参数作为字符串获取，解决TS类型不匹配报错？

问题原因 #

1. 为什么route.params.who的类型是string | string[] #

Vue Router的TypeScript类型定义中，路由参数params的默认类型是Record<string, string | string[]>，这是框架的通用设计：

• 如果路由配置了可重复参数（如path: '/change/:who+'）、通配符参数，或者URL出现同名参数重复拼接的情况，对应参数值会是字符串数组
• 类型系统不会自动根据你当前单条路由的配置推断参数的具体类型，所以统一用联合类型兼容所有可能场景

2. 为什么取第一个元素得到的是首字母m #

你写route.params.who[0]时，是按照数组类型的假设取索引，但实际运行时route.params.who就是你预期的字符串michael，对字符串直接取[0]索引自然会返回第一个字符m，并不是这个参数真的是数组类型。

解决方法 #

你可以选择任意一种方案解决类型报错：

• 方案1：类型断言（适合确认该参数永远为单个字符串的场景）

user.value = route.params.who as string

• 方案2：类型收窄处理（兼容性更高，兼容可能出现数组的边界场景）

const whoParam = route.params.who
user.value = Array.isArray(whoParam) ? whoParam[0] : whoParam

• 方案3：给useRoute指定泛型（适合项目里需要多次使用该路由参数的场景，Vue Router 4+支持）

// 先定义当前路由的参数类型
interface ChangeRouteParams {
  who: string
}
// 传入泛型后，route.params的类型会自动匹配
const route = useRoute<ChangeRouteParams>()
user.value = route.params.who // 无类型报错

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