Vue 3动态插槽引发vue-tsc报TS2339类型错误求助

问题根源 #

你遇到的TS2339: Property 'tab1' does not exist on type 'TabsSlots'错误，是因为TypeScript的静态类型检查无法推断出基于nav属性动态生成的tab1/tab2这类插槽名称。Vue的defineSlots默认要求插槽名称是静态可枚举的，动态生成的插槽无法被自动识别。

解决方案 #

以下提供两种可行的解决思路，你可以根据项目需求选择：

方案1：扩展Slots类型，支持tab{N}格式的动态插槽 #

通过TypeScript的模板字符串类型定义插槽类型，让编译器识别所有tab加数字后缀的插槽名称：

// 在Tabs组件的<script setup lang="ts">中
import { defineProps, defineSlots } from 'vue';

// 定义nav项的类型
interface NavItem {
  id: string;
  name: string;
}

// 声明组件props
const props = defineProps<{
  nav: NavItem[];
}>();

// 定义支持tab1、tab2...格式的插槽类型
type TabsSlots = {
  [SlotName in `tab${number}`]: () => VNode[];
};

// 绑定插槽类型到组件
defineSlots<TabsSlots>();

模板部分保持你原有的代码不变即可。这种方式通过类型系统告诉TS：所有以tab开头加数字的插槽都是合法的，从而绕过静态检查的限制。

方案2：改用作用域插槽替代动态命名插槽（推荐） #

这是更符合Vue最佳实践的方案，避免动态命名插槽带来的类型问题，同时提升组件的灵活性：

组件内部修改：

<script setup lang="ts">
import { defineProps } from 'vue';

interface NavItem {
  id: string;
  name: string;
}

const props = defineProps<{
  nav: NavItem[];
}>();
</script>

<template>
  <div v-if="nav" class="tabs-content">
    <div
      v-for="(tab, index) in nav"
      :id="tab.id"
      :key="index"
    >
      <!-- 使用单一作用域插槽，传递tab相关数据 -->
      <slot name="tab" :tab="tab" :index="index"></slot>
    </div>
  </div>
</template>

父组件使用方式：

<Tabs :nav="nav">
  <template #tab="{ tab, index }">
    <!-- 根据index或tab.id渲染对应内容 -->
    <div v-if="index === 0">About页面内容</div>
    <div v-else-if="index === 1">Enquire页面内容</div>
    <!-- 支持nav动态增减时自动适配 -->
  </template>
</Tabs>

这种方式不需要依赖动态命名的插槽，父组件通过作用域参数区分不同tab的内容，类型检查完全正常，同时组件扩展性更强。

临时绕过方案（不推荐长期使用） #

如果需要快速临时解决错误，可以在使用插槽的地方添加// @ts-ignore注释：

<!-- @ts-ignore -->
<template #tab1></template>

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