Nuxt3 TypeScript组件Props可能未定义，如何正确声明自定义类型Props？

问题背景 #

在Nuxt3项目中使用TypeScript开发人员信息创建/编辑组件，关闭nuxt.config.ts中的typescript.typeCheck: true时组件运行正常，但开启该配置后，编译出现9个相同错误：'props.person' is possibly 'undefined'，所有错误都集中在update模式下使用props.person为state赋值的代码块。

关键代码片段 #

Props定义

const props = defineProps({
  mode: String,
  person: { type: Object as () => IPerson },
});

State赋值逻辑

if (props.mode === "update") {
  state.id = props.person.id;
  state.firstName = props.person.firstName;
  state.lastName = props.person.lastName;
  state.email = props.person.email;
  state.phone = props.person.phone;
  state.memberSince = props.person.memberSince.substring(0, 10);
  state.memberLastYear = props.person.memberLastYear;
}

IPerson接口

export interface IPerson {
    id?: number;
    firstName: string;
    lastName: string;
    email: string;
    phone: string;
    memberSince: string;
    memberLastYear: string;
};

Nuxt配置

typescript: {
    typeCheck: true
}

解决方案 #

方案1：为person Prop添加必填校验+细化类型（推荐） #

因为update模式下person是必须传入的，修改Props定义，明确其必填性并细化mode的类型，让TypeScript能精准推断：

const props = defineProps({
  mode: {
    type: String as () => 'create' | 'update',
    required: true
  },
  person: { 
    type: Object as () => IPerson,
    required: true,
    // 可选：添加兜底默认值，防止父组件意外未传入
    default: () => ({
      id: undefined,
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      memberSince: "",
      memberLastYear: ""
    }) satisfies IPerson
  }
});

修改后，TypeScript会确认props.person永远不会是undefined，同时Vue会在开发环境校验父组件是否按要求传入参数。

方案2：非空断言（快速临时解决） #

在使用props.person的地方添加!，强制告诉TypeScript该值不为undefined：

if (props.mode === "update") {
  state.id = props.person!.id;
  state.firstName = props.person!.firstName;
  state.lastName = props.person!.lastName;
  state.email = props.person!.email;
  state.phone = props.person!.phone;
  state.memberSince = props.person!.memberSince.substring(0, 10);
  state.memberLastYear = props.person!.memberLastYear;
}

⚠️ 注意：仅当你能100%保证update模式下父组件一定会传入person时使用，否则运行时仍可能出现错误。

方案3：类型守卫+兜底处理（严谨写法） #

通过代码判断确保props.person存在后再赋值，并添加兜底逻辑：

if (props.mode === "update" && props.person) {
  state.id = props.person.id;
  state.firstName = props.person.firstName;
  state.lastName = props.person.lastName;
  state.email = props.person.email;
  state.phone = props.person.phone;
  state.memberSince = props.person.memberSince.substring(0, 10);
  state.memberLastYear = props.person.memberLastYear;
} else if (props.mode === "update") {
  // 兜底处理：抛出错误或设置默认值
  console.error("update模式下必须传入person参数");
}

这种写法能避免潜在的运行时错误，同时通过类型守卫让TypeScript消除报错。

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