Vue3中Suspense特性TypeScript类型校验失败问题求助

在Vue3中使用TypeScript实现Suspense实验特性时，遇到编译错误，提示default和fallback插槽属性不存在于类型{}中，而纯JavaScript环境下代码运行正常。

报错信息 #

src/views/EmailVerification.vue:8:22 - error TS2339: Property 'default' does not exist on type '{}'.

8           <template #default>
                       ~~~~~~~

src/views/EmailVerification.vue:11:22 - error TS2339: Property 'fallback' does not exist on type '{}'.

11           <template #fallback>
                        ~~~~~~~~

解决方案 #

方案1：升级Vue相关依赖 #

确保Vue核心包及类型定义包为支持Suspense插槽类型的版本（Vue 3.2.0及以上），执行命令更新：

npm update vue @types/vue
# 或使用yarn
yarn upgrade vue @types/vue

方案2：手动扩展Suspense组件类型 #

若升级后问题仍存在，在项目的类型声明文件（如src/vite-env.d.ts或src/types/vue.d.ts）中添加以下代码，明确Suspense的插槽定义：

import type { SuspenseProps } from 'vue'

declare module 'vue' {
  interface GlobalComponents {
    Suspense: {
      new (): {
        $props: SuspenseProps
      }
    }
  }
}

export {}

方案3：改用defineComponent定义组件（非<script setup>场景） #

如果未使用<script setup>语法，可通过defineComponent包裹组件，让TypeScript自动推导Suspense的插槽类型：

<script lang="ts">
import { defineComponent } from 'vue'
import EmailVerificationAsync from './EmailVerificationAsync.vue'
import ProcessingVerification from './ProcessingVerification.vue'

export default defineComponent({
  components: {
    EmailVerificationAsync,
    ProcessingVerification
  }
})
</script>

<template>
  <div class="flex min-h-full">
    <Transition name="page" mode="out-in">
      <KeepAlive>
        <Suspense>
          <template #default>
            <EmailVerificationAsync />
          </template>
          <template #fallback>
            <ProcessingVerification />
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </div>
</template>

原理说明 #

该错误源于TypeScript无法自动识别Suspense组件的default和fallback插槽类型，通过升级依赖补充类型定义，或手动声明类型，可让TS正确识别这些插槽的合法性。

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