Vue 3中必填Prop未传入时未抛出错误的问题排查

• 确认是否处于开发模式
  Vue 3仅在开发模式下会触发Prop验证报错，生产模式会自动跳过校验以优化性能。如果当前项目是通过npm run build编译后预览，不会出现报错，需确保用开发命令启动（如npm run dev）。

• 检查defineProps的写法是否正确
  在<script setup>中，defineProps有两种声明方式，只有对象式声明能完整配置required规则：
  错误的类型声明式写法（无法指定必填）：

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

  正确的对象式写法（明确设置必填）：

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

  若使用TypeScript并结合类型声明，需用withDefaults配合：

  interface Props {
    pageName: string
  }
  const props = withDefaults(defineProps<Props>(), {})
  

  注：这里无需给pageName设默认值，类型标记为非可选后，开发模式会自动触发必填校验。

• 查看Vue开发者工具提示
  控制台报错可能被其他日志覆盖，打开Vue开发者工具选中ComponentA，查看「Props」面板，会明确标记缺失的必填Prop，即使控制台无提示，工具内也会显示。

• 确认Vue版本依赖是否纯净
  执行npm list vue查看依赖树，确保项目中仅存在指定的3.2.31版本Vue。若存在多版本依赖冲突，可能导致校验逻辑失效。

• 检查是否禁用了Prop验证
  若项目配置中通过app.config.warnHandler覆盖了默认警告逻辑，或vue.config.js有特殊配置，可能屏蔽Prop验证警告。可暂时注释自定义警告处理器，验证是否恢复报错。

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