Vue 警告「Expected Object, got Array」？3 步教你把类型对齐，prop 立刻合法！

Vue 警告「Expected Object, got Array」？3 步教你把类型对齐，prop 立刻合法！

正文目录

1. 报错含义：Vue 在挑剔什么类型？
2. 5 大高频翻车场景 & 修复代码
3. 万能兜底：允许多类型与默认值
4. 预防 checklist（不再踩坑）
5. 一句话总结

一、报错含义：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>

三、万能兜底：允许多类型与默认值

四、预防 checklist

• 所有 prop给具体类型而非unknown
• 异步数据初始为对象或允许多类型
• 泛型加约束<T extends Record<string, any>>
• 第三方库断言或封装
• 控制台「Expected Object」= 立即对齐类型或允许多类型

五、一句话总结

「Expected Object, got Array」= 传入值与 prop 类型不匹配。
用「具体类型 + 多类型 + 默认值」三件套，让 prop 永远合法，警告瞬间消失！

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》