Vue子组件接收image Props为undefined问题排查与修复

• Prop命名映射错误：HTML属性大小写不敏感，Vue会自动将模板中短横线（kebab-case）命名的prop转换为驼峰（camelCase）格式供子组件接收。你父组件传递的prop名为product-image，但子组件props中定义的接收字段是image，字段名不匹配导致无法取值。其余三个prop可正常接收是因为命名刚好符合映射规则：name/price无短横线、名称完全一致，product-id对应子组件定义的productId驼峰字段，映射关系正确。
• 类型定义不匹配：父组件getImage方法当前直接返回Firestore存储的图片URL数组，但子组件中对应prop定义的类型为String，类型校验失败会导致值异常。
• 赋值时序错误：子组件在data()初始化阶段直接将prop值赋值给内部item对象，而父组件的商品数据是Firestore异步拉取的，子组件初始化时prop还未拿到有效值，后续prop更新时，data中已经初始化的字段不会自动同步更新，就算prop命名正确也会出现初始值为undefined的问题。

1. 修正子组件prop命名：将原props中定义的image字段改为productImage，和父组件传递的product-image形成正确的短横线转驼峰映射；如果要传单张封面图，prop类型保持String即可，如果要传全量图片数组则将类型改为Array。
2. 调整父组件getImage逻辑：购物车场景一般只需要商品封面图，直接返回图片数组的第一个元素即可，避免传数组和String类型冲突。
3. 修正子组件赋值逻辑：不要在data()初始化时直接赋值异步prop，通过watch监听prop变化同步更新内部item对象，或者直接用计算属性派生item数据，解决异步时序问题。

修正后代码片段 #

父组件productPage调整部分 #

// 仅修改getImage方法，其余逻辑不变
getImage(images) {
  // 返回数组第一张作为封面，做空值兼容避免报错
  return images?.length ? images[0] : ''
},

子组件AddToCart完整修正代码 #

<template>
  <div class="add-to-cart">
    <button class="btn btn-success fs-6" @click="addToCart">
      <i class="fa-solid fa-cart-plus mx-1"></i>加到購物車
    </button>
  </div>
</template>

<script>
export default {
  name: 'AddToCart',
  props: {
    name: String,
    // 兼容数字类型的价格值，避免Firestore存数字时校验报错
    price: [String, Number],
    productId: String,
    // 修正prop命名，对应父组件传递的product-image
    productImage: String,
  },
  data() {
    return {
      item: {
        productName: '',
        productPrice: '',
        product_id: '',
        product_image: '',
      },
    }
  },
  watch: {
    // 监听相关prop，立即执行同步值到item，解决异步时序问题
    productImage: {
      immediate: true,
      handler() {
        this.item.productName = this.name
        this.item.productPrice = this.price
        this.item.product_id = this.productId
        this.item.product_image = this.productImage
      }
    }
  },
  methods: {
    addToCart() {
      // 原有加购逻辑
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Albert Hsu