nuxt Why do I get `error.value.statusCode` does not exists and how to solve?

Environment

Operating System: Linux
Node Version: v18.18.0
Nuxt Version: 3.8.2
CLI Version: 3.10.0
Nitro Version: 2.8.1
Package Manager: [email protected]
Builder: -
User Config: ssr, modules, ui, runtimeConfig, css, site, linkChecker, sitemap, colorMode, ogImage, vite, devtools
Runtime Modules: @nuxt/[email protected], @nuxtseo/[email protected]
Build Modules: -

Reproduction

Create a nuxt project
Create a composable like this one

export async function fetchRepoBySlug(slug: string) {
  const config = useRuntimeConfig()

  const data = await $fetch(`/repositories/${slug}`, {
    baseURL: config.public.apiBase,
  })

  const validatedData = myzod.object({
    data: myzod.object({
      name: myzod.string(),
      npmName: myzod.string().or(myzod.null()),
      stars: myzod.object({
        current: myzod.object({
          value: myzod.number(),
          fetchedAt: myzod.string(),
        }),
        previous: myzod.object({
          value: myzod.number(),
          fetchedAt: myzod.string(),
        }),
      }),
      downloads: myzod.object({
        current: myzod.object({
          value: myzod.number(),
          start: myzod.string(),
          end: myzod.string(),
        }),
        previous: myzod.object({
          value: myzod.number(),
          start: myzod.string(),
          end: myzod.string(),
        }),
      }),
      starsMetrics: myzod.array(myzod.object({
        value: myzod.number(),
        fetchedAt: myzod.string(),
      })),
      downloadsMetrics: myzod.array(myzod.object({
        value: myzod.number(),
        fetchedAt: myzod.string(),
      })),
    }),
  }).parse(data)

  return validatedData
}

And use it in a page

const route = useRoute()
const slug = route.params.slug as string
const { data: repo, error } = await useAsyncData(slug, () => fetchRepoBySlug(slug))

if (error.value) {
  // TODO: it's strange, why this happens?
  if (error.value.statusCode === 404) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Repository not found',
      fatal: true,
    })
  }
}

Describe the bug

Hello,

When using the useAsyncData, the type for the error is not a FetchError, which seems logic, but how to solve this since the value statusCode exists?

Additional context

Full error

Property 'statusCode' does not exist on type 'Error'.ts(2339)

Logs

No response

Dec 27 '23 18:12 Barbapapazes

Can you provide a running reproduction please?

Something tells me that error.value is a union of various types and you have to narrow it down (because indeed, Error has no statusCode but H3Error has (checking e.g. via isNuxtError)