Nuxt电商项目：组件props传递及fetch参数访问问题

1. 修正父组件传值逻辑 #

你的需求是取当前产品的第一个分类，但目前传递的是整个product.Categories数组，这不仅不符合接口要求，还可能导致子组件拿到非预期值。正确传值应取数组第一个元素的名称字段，同时处理分类数组为空的边界情况：

<!-- /products/_slug.vue -->
<template>
  <!-- 确保分类数组存在且有元素时再传递，取第一个分类的名称 -->
  <RelatedProducts 
    v-if="product.Categories && product.Categories.length > 0"
    :category-name="product.Categories[0].name" 
  />
</template>

2. 规范子组件Props的TypeScript定义 #

在RelatedProducts组件中严格定义categoryName的类型，确保类型安全，避免因类型不匹配导致访问异常：

<!-- RelatedProducts.vue -->
<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  categoryName: {
    type: String as PropType<string | undefined>,
    required: false,
    default: ''
  }
})
</script>

3. 确保在正确时机发起请求 #

如果父组件的product是异步获取的，RelatedProducts的mounted钩子执行时categoryName可能还未赋值，可通过以下两种方式解决：

方案一：监听props变化触发请求

<!-- RelatedProducts.vue -->
<script setup lang="ts">
import { watch, onMounted } from 'vue'

const props = defineProps({
  categoryName: {
    type: String,
    required: true
  }
})

// 封装请求逻辑
const fetchRelatedProducts = async () => {
  if (!props.categoryName) return
  const res = await fetch(`/api/products?category=${props.categoryName}&limit=4`)
  const data = await res.json()
  // 处理返回的相关产品数据
}

// 挂载时执行一次，同时监听分类变化重新请求
onMounted(fetchRelatedProducts)
watch(() => props.categoryName, fetchRelatedProducts, { immediate: true })
</script>

方案二：用v-if控制组件渲染（推荐）

在父组件中通过v-if确保categoryName存在后再渲染子组件，这样mounted钩子执行时能直接拿到有效值：

<!-- /products/_slug.vue -->
<RelatedProducts 
  v-if="product.Categories?.[0]?.name"
  :category-name="product.Categories[0].name" 
/>

此时子组件的mounted钩子可直接安全访问props.categoryName：

<!-- RelatedProducts.vue -->
<script setup lang="ts">
import { onMounted } from 'vue'

const props = defineProps<{
  categoryName: string
}>()

onMounted(async () => {
  const res = await fetch(`/api/products?category=${props.categoryName}&limit=4`)
  const data = await res.json()
  // 处理数据
})
</script>

4. 排查其他潜在问题 #

• 检查product.Categories的结构：确认每个分类对象是否存在name字段，避免因字段名错误导致传递值为undefined。
• 借助Vue开发工具：查看组件Props面板，确认categoryName是否被正确传递。

内容的提问来源于stack exchange，提问作者Pedro Souza