Vue.js向子组件传递对象作为props出现TypeError和警告如何解决？

问题根源 #

你对v-for的遍历目标使用错误：你当前是直接遍历整个cart对象，而Vue在使用v-for遍历普通对象时，默认遍历的是对象每个属性的属性值。根据你给出的报错信息，cart对象下的id属性值为00e84ffb-1fbf-00bf-d3cc-adbcc795e060（字符串）、type属性值为carts（字符串），遍历后这些字符串会被当做items传给子组件，自然会触发Object类型的Prop校验失败。
你实际需要遍历的是cart.attributes.items这个商品项数组，而不是整个cart对象。

修复步骤 #

1. 修正父组件遍历逻辑，增加空值防护
   修改父组件模板部分的代码，先判断数组存在再遍历，同时调整遍历目标：

<template>
    <section id="cart-page" class="row">
        <!-- 先判断cart和items存在再渲染，避免初始加载无数据时报错 -->
        <div v-if="cart?.attributes?.items?.length" 
             v-for="item in cart.attributes.items" 
             :key="item.product.id">
            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                <div class="title">WARENKORB</div>
                <!-- 遍历得到的单个商品项传给子组件 -->
                <SoldTickets :items = "item"/>
            </div>
        </div>
    </section>
</template>

如果你使用的Vue2版本不支持可选链?.，也可以改成多层判断：v-if="cart && cart.attributes && cart.attributes.items && cart.attributes.items.length"。

2. （可选优化）调整子组件Prop命名更符合语义
   子组件的Prop接收的是单个商品项，可以改名为item避免和数组混淆，保持现有命名也可以正常运行。

补充说明 #

你在父组件直接展示items相关内容没有报错，是因为你直接访问的是cart.attributes.items下的属性，没有遍历整个cart对象，所以不会拿到那些字符串值。

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