Vue 警告「Expected Object, got Array」？3 步教你把类型对齐，prop 立刻合法！
正文目录
- 报错含义：Vue 在挑剔什么类型？
- 5 大高频翻车场景 & 修复代码
- 万能兜底：允许多类型与默认值
- 预防 checklist（不再踩坑）
- 一句话总结
一、报错含义：Vue 在挑剔什么类型？
当你在控制台看到：
Invalid prop value: expected Object, got Array.Vue 在告诉你：
「你传给xxx的 prop 是 Array，但组件声明它是 Object。」
本质：prop 类型与传入值不匹配。
二、5 大高频翻车场景 & 修复代码
① 父组件传 Array，子组件声明 Object
<!-- 父组件 ❌ --> <MyComp :data="[1, 2, 3]" /> <!-- 子组件 ❌ --> <script setup lang="ts"> defineProps({ data: Object }); // 期望 Object </script>修复：对齐类型或允许多类型
<!-- ✅ 传对象 --> <MyComp :data="{ list: [1, 2, 3] }" />或允许多类型：
defineProps({data:[Object,Array]});// ✅ 允许多类型② 异步数据初始为 Array
<!-- 父组件 ❌ --> <MyComp :data="items" /> <script setup> const items = ref([]); // 初始 Array </script>修复：初始空对象或允许多类型
constitems=ref({list:[]});// ✅ 初始对象// 或允许多类型defineProps({data:[Object,Array],default:()=>({})});③ 泛型未约束，返回 Array
// ❌ 泛型未约束，返回 ArrayfunctiongetData<T>():T{return[]asT;// T 被推断为 Array}constdata=getData();// Array修复：给泛型加约束
functiongetData<TextendsRecord<string,any>>():T{return{}asT;// ✅ 约束为对象}④ 第三方库返回 Array
// ❌ 库返回 Arrayimport{load}from'lodash';constdata=load('user');// Array修复：断言或封装
constdata=load('user')asRecord<string,any>;// 或封装functionloadUser():Record<string,any>{returnload('user')asRecord<string,any>;}⑤ 组件 props 未定义类型
// ❌ props 未定义类型，默认 unknownconstprops=defineProps();props.data;// unknown修复：给 props 上类型
<script setup lang="ts"> interface Props { data: Record<string, any> } const props = defineProps<Props>(); // ✅ 具体类型 </script>三、万能兜底：允许多类型与默认值
| 场景 | 方案 | 示例 |
|---|---|---|
| 多类型 | 数组类型 | defineProps({ data: [Object, Array] }) |
| 默认值 | default 函数 | default: () => ({}) |
| 运行时校验 | validator | validator: (v) => typeof v === 'object' |
四、预防 checklist
- 所有 prop给具体类型而非
unknown - 异步数据初始为对象或允许多类型
- 泛型加约束
<T extends Record<string, any>> - 第三方库断言或封装
- 控制台「Expected Object」= 立即对齐类型或允许多类型
五、一句话总结
「Expected Object, got Array」= 传入值与 prop 类型不匹配。
用「具体类型 + 多类型 + 默认值」三件套，让 prop 永远合法，警告瞬间消失！
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《Vue.js 3企业级项目开发实战（微课视频版》
)
