Vue3+TS组合式API中如何合法为必填Props传入null？

问题原因 #

虽然业务逻辑保证show为true时clickedGeographicCoordinate不为null，但初始状态下show为false时组件已渲染，此时传递的null触发了Vue的运行时props类型检查警告。这是因为Vue运行时不识别TypeScript的联合类型定义——即便你在PropType里声明了| null，它依然会用Object类型规则校验，而null会被判定为不符合Object类型要求。

可行解决方案 #

方案一：条件渲染组件 #

只在show为true且clickedGeographicCoordinate不为null时渲染component1，从根源避免传递非法值：

<template>
  <component1
    v-if="show && clickedGeographicCoordinate"
    v-model:show="show"
    :geographic-coordinate="clickedGeographicCoordinate" 
    @save-event="saveEvent"
  />
</template>

方案二：调整Props定义 #

将geographicCoordinate设为非必填，同时允许null作为默认值，组件内部处理空值情况：

// component1.vue
const props = defineProps({
  show: { type: Boolean, required: true },
  geographicCoordinate: {
    type: Object as PropType<GeographicCoordinate | null>, 
    required: false,
    default: null
  }
});

在组件内部使用时，可通过非空断言确保类型安全（需保证业务逻辑中show为true时必有值）：

const validCoordinate = props.geographicCoordinate!;

方案三：自定义Props验证器 #

保留required: true，添加自定义验证函数让Vue运行时接受null或合法的坐标对象：

// component1.vue
const props = defineProps({
  show: { type: Boolean, required: true },
  geographicCoordinate: {
    type: Object as PropType<GeographicCoordinate | null>, 
    required: true,
    validator: (value: unknown) => {
      // 允许null，或包含latitude和longitude的对象
      return value === null || (typeof value === 'object' && value !== null && 'latitude' in value && 'longitude' in value);
    }
  }
});

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