Javascript Vue.js无法读取Props中嵌套对象的null/undefined属性

所以我从axios调用中得到一个对象。我将对象传递给子元素。然后在该子元素中，我循环遍历该对象以读取另一个嵌套对象的属性。这里我得到一个警告，我试图读取的属性为undefined/null。我确实检查了控制台，并且我正确地接收到了所有信息。问题在于读取嵌套属性。 错误

TypeError: Cannot read property 'username' of null

我收到的对象如下所示

{
    "images": [
        "1616575030315IMG-20210211-WA0003.jpg",
        "1616575030316IMG-20210211-WA0004.jpg",
        "1616575030316IMG-20210211-WA0000.jpg"
    ],
    "_id": "605afa36320a772cecc4ed85",
    "name": "Maman",
    "brand": "Zara",
    "user": {
        "email": [
            "zakisb97@gmail.com"
        ],
        "_id": "6061bd38ada425383cc8a5b2",
        "username": "zakisb97",
        "tel": "0560728063",
        "apropos": "salam123456",
    },
    "type": "Robes",
    "size": "M",
    "description": "Good to wear",
    "price": "150",
}

母成分：市场产品

    <div
        v-for="product in products"
        class=""
        :key="product.id"
    >
        <product-default :product="product"  />
    </div>

产品默认的子组件

<h1>{{ product.user.username }}</h1> // results in undefined

export default {
    props: {
        product: {
            type: Object,
            require: true,
            default: () => {}
        },
    },
   data: () => ({
       // nothing here
    }),
  
}

{{product.user.username}}//导致未定义
导出默认值{
道具：{
产品：{
类型：对象，
要求：对，
默认值：（）=>{}
},
},
数据：（）=>({
//这里什么都没有
}),
}

当对象未定义时，您可能正在访问对象属性。 试试这个：

    <div
        v-for="product in products"
        class=""
        :key="product.id"
    >
        <product-default v-if="product" :product="product"  />
    </div>

这是：

<h1 v-if="product && product.user">{{ product.user.username }}</h1>

{{product.user.username}

同样的问题。我确实检查了我得到的数据。所有产品都定义了username属性。您确定所有产品都定义了

user

属性吗？如果您将此添加到

h1

：

v-if=“product&&product.user”

您是对的，我刚刚重新检查了导致用户不存在的问题。因为在开发过程中，我确实从数据库中删除了他们的记录。谢谢你，伙计！