如何解决Nuxt中useFetch返回值的TypeScript类型报错？

问题核心 #

你的useFetch返回的data是联合类型，包含多个响应分支（比如带error的错误分支、带url的跳转分支等）。TypeScript不允许直接访问联合类型中并非所有分支都存在的属性（比如url），因为存在值属于{ error: string }分支的可能，此时url不存在。

优雅修复方案 #

1. 类型守卫（推荐，安全且清晰） #

通过运行时判断缩小类型范围，让TypeScript确认当前值属于包含url的分支：

方式一：自定义类型谓词函数

// 定义类型守卫函数，判断是否为带url的响应
function hasUrl(res: unknown): res is { url: string } {
  return typeof res === 'object' && res !== null && 'url' in res && typeof (res as { url: string }).url === 'string';
}

// 使用
if (data.value && hasUrl(data.value)) {
  window.location.href = data.value.url;
}

方式二：内联类型判断

无需额外函数，直接在条件中完成类型缩小：

if (data.value && 'url' in data.value && typeof data.value.url === 'string') {
  window.location.href = data.value.url;
}

2. 显式指定useFetch泛型类型 #

提前定义响应的联合类型，传递给useFetch，让类型推断更明确：

// 定义登录接口的所有可能响应类型
type LoginApiResponse =
  | { error: string }
  | { url: string }
  | { success: boolean; user: { /* 这里定义user的类型 */ }; token: string };

// 给useFetch指定泛型
const { data, error } = await useFetch<LoginApiResponse>(`/api/auth/login?provider=${provider}`);

// 之后同样用类型守卫访问
if (data.value && 'url' in data.value) {
  window.location.href = data.value.url;
}

3. 非空断言（不推荐） #

如果你能100%确定此时data.value一定包含url，可以用!强制断言，但这种方式跳过了TypeScript的类型检查，存在运行时风险：

window.location.href = data.value!.url;

类型判断原理 #

TypeScript对联合类型的属性访问有严格限制：只有当所有分支都包含该属性时，才能直接访问。如果某个分支没有该属性，必须通过类型缩小（比如类型守卫）告诉TypeScript：当前代码块内的值属于包含该属性的分支，此时才能安全访问。

你的错误提示正是因为联合类型中存在{ error: string }分支，该分支没有url属性，所以TypeScript阻止了直接访问。

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