在Nuxt的TypeScript项目中如何从useError获取statusCode

嘿，我完全懂你现在的困扰——自定义错误页里只能拿到错误消息，却看不到404、500这些关键的状态码对吧？别着急，这其实是因为Nuxt传递的错误对象比原生Error类型包含更多信息，只是我们需要用正确的方式去获取它！

我给你两种简单可行的方案：

方案一：直接使用useError组合式API #

这是最直接的方式，不用纠结props的类型问题。你只需要在错误页的<script setup>里引入useError，它会直接返回包含statusCode的Nuxt错误实例：

<script setup lang="ts">
import { useError } from '#app'

// 获取Nuxt的错误实例
const nuxtError = useError()

// 现在就能直接访问状态码啦
console.log(nuxtError.statusCode) // 输出404、500等状态码

function onClearError() {
  clearError({ redirect: "/" });
}
</script>

<template>
  <div class="error-page">
    <h1>出错啦！状态码：{{ nuxtError.statusCode }}</h1>
    <p>{{ nuxtError.message }}</p>
    <button @click="onClearError">回到首页</button>
  </div>
</template>

方案二：扩展Props的错误类型 #

如果你还是想通过props来获取错误信息，那就要给错误对象定义一个扩展类型，因为原生的Error类型并不包含statusCode属性，TypeScript会阻止你访问它。我们可以自定义一个类型来兼容Nuxt的错误结构：

<script setup lang="ts">
// 定义Nuxt错误的扩展类型，包含statusCode和可选的statusMessage
interface NuxtError extends Error {
  statusCode?: number;
  statusMessage?: string;
}

// 给props指定自定义的错误类型
const props = defineProps({
  error: {
    type: Object as () => NuxtError,
    required: true,
  },
});

// 现在props.error就能正常访问statusCode了
console.log(props.error.statusCode)

function onClearError() {
  clearError({ redirect: "/" });
}
</script>

<template>
  <div class="error-page">
    <h1>Error {{ props.error.statusCode }}</h1>
    <p>{{ props.error.message }}</p>
    <button @click="onClearError">返回首页</button>
  </div>
</template>

为什么之前拿不到statusCode呢？其实Nuxt在传递错误给自定义错误页时，已经把状态码、状态消息这些信息附加在错误对象上了，只是原生Error类型没有这些字段，导致TypeScript报错，我们只要告诉TS这些字段存在就行啦～

备注：内容来源于stack exchange，提问作者Hazadus