如何解决Vue中TypeScript报错：Property 'id'不存在于Record<never, never>

错误原因 #

TypeScript无法确定当前路由的params结构，推断出的联合类型中包含了不存在id的情况（比如Record<never, never>），因此触发类型检查错误。

解决方法 #

方法1：通过路由props传递参数（最规范） #

在路由配置中，将路由参数映射为组件props，既符合Vue的组件传参规范，也能自动获得类型提示：

// router/index.ts
import type { RouteRecordRaw } from 'vue-router'
import Detail from '../views/Detail.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail,
    props: (route) => ({ id: route.params.id as string })
  }
]

然后在组件中通过props接收：

<script setup lang="ts">
const props = defineProps<{
  id: string
}>()

// 直接使用props.id即可，无需再从route.params获取
console.log(props.id)
</script>

方法2：直接类型断言（快速临时解决） #

如果你能确保当前路由一定存在id参数，可以直接通过类型断言告诉TypeScript：

const route = useRoute()
// 方式1
const id = route.params.id as string
// 方式2
const id = (route.params as { id: string }).id

方法3：利用路由name做类型窄化 #

如果你的路由配置了明确的name，可以通过判断路由name来让TypeScript自动推断参数类型：

const route = useRoute()

if (route.name === 'Detail') {
  // 这里TS会自动识别当前路由params包含id
  const id = route.params.id
}

方法4：全局扩展路由参数类型（适合全局通用参数） #

在项目根目录创建src/router.d.ts文件，扩展Vue Router的RouteParams类型：

declare module 'vue-router' {
  interface RouteParams {
    id: string
  }
}

export {}

注意：这种方式会让所有路由的params都包含id，如果只有部分路由有该参数，不建议使用。

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