Laravel8+Vue3+TypeScript+Inertia项目TS2571未知类型报错如何解决？

报错根因 #

TS2571 报错是因为 TypeScript 无法推导出 usePage().props.value.auth 下 user 属性的具体类型，即使你自定义了带泛型的 usePage 函数，类型定义也没有被 TS 正确识别。你去掉 .user 后运行正常，说明运行时 auth 属性是存在的，只是静态类型校验不通过。

解决方法 #

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

如果只是单文件使用，直接给 auth 断言你定义的 AuthInterface 类型即可：

import type { AuthInterface } from '你的接口定义文件路径'

console.log((usePage().props.value.auth as AuthInterface).user);

因为你定义的 user 是可选属性，访问 user 下的字段时建议加可选链避免运行时报错：

console.log((usePage().props.value.auth as AuthInterface).user?.name);

方法2：全局注册 Inertia 自定义属性类型（一劳永逸） #

你可以直接把自定义的 PageProps 注册为 Inertia 的全局类型，之后不需要封装自定义 usePage 也能自动推导类型：

1. 新建全局类型声明文件 types/inertia.d.ts
2. 写入以下内容：

import type { AuthInterface } from '你的接口定义文件路径'

declare module '@inertiajs/inertia-vue3' {
  interface PageProps {
    auth: AuthInterface
  }
}

配置完成后直接使用官方的 usePage 就能自动识别所有 props 类型：

import { usePage } from '@inertiajs/inertia-vue3'

// 这里不会再报 unknown 错误
console.log(usePage().props.value.auth.user?.id)

方法3：修复自定义 usePage 的类型识别 #

如果你要保留自己封装的 usePage 函数，确认所有调用的地方都是导入你自定义的函数，不要误导入了官方的 usePage 即可：

// 确认是导入你自己定义的usePage，不是官方的
import { usePage } from '你自定义usePage的文件路径'

console.log(usePage().props.value.auth.user?.email)

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