Vue3中v-for遍历item为unknown的TypeScript报错解决

云原生阿岚

2026-8-16

解决Vue3 + TypeScript中v-for遍历props数组时item类型为unknown的问题

你遇到的TypeScript错误是由类型定义和props声明的细节问题导致的，以下是具体修复方案：

问题根源

接口Item中误用了大写的String/Boolean（构造函数类型），TypeScript类型注解需使用小写的原始类型string/boolean，大写构造函数类型会干扰类型推导逻辑。
原代码中defineProps里的type字段写为Object，但items是数组类型，这个错误直接导致TypeScript无法正确识别数组元素的类型。

修复步骤

1. 修正接口类型定义

将接口内的构造函数类型替换为原始类型：

interface Item {
  href: string;
  active: boolean;
  text: string;
}

2. 修正props声明（两种方案可选）

方案一：修复原对象式声明

保持原有写法，修正type字段的类型指向：

<script setup lang="ts">
import NavLink from '@/Components/NavLink.vue';
import { PropType } from 'vue'

interface Item {
  href: string;
  active: boolean;
  text: string;
}

const props = defineProps({
  items : {
    type: Array as PropType<Item[]>, // 将Object改为Array，匹配数组类型
    required: true
  }
});
</script>

方案二：改用类型声明式defineProps（更推荐）

这种写法更贴合TypeScript风格，类型推导更精准：

<script setup lang="ts">
import NavLink from '@/Components/NavLink.vue';

interface Item {
  href: string;
  active: boolean;
  text: string;
}

// 直接通过类型声明定义props
const props = defineProps<{
  items: Item[];
}>();
</script>