已做空值校验仍返回可能为空值的TypeScript表单代码问题

你的代码 #

export function validaterUserContributors(
  propList: FormPropList<IdentityUserDto>
) {
  const firstNameNode = propList.dropByValue(
    'AbpIdentity::DisplayName:Name',
    (prop, displayName) => prop.displayName === displayName
  );

  const emailControlValue = firstNameNode?.value;

  if (emailControlValue) {
    const emailControl = new FormControl(
      emailControlValue,
      Validators.required
    );

    propList.add(emailControl.value);

}

报错信息 #

Argument of type 'FormProp | null' is not assignable to parameter of type 'FormProp'. Type 'null' is not assignable to type 'FormProp'

问题原因 #

你之前的if (emailControlValue)确实校验了firstNameNode?.value非空，但**emailControl.value的类型和emailControlValue不是一回事**。

TypeScript里，FormControl的默认泛型规则会让它的value类型被推断为T | null——哪怕你初始化时传入了非空的emailControlValue，TypeScript依然认为这个控件的value后续有可能变为null，所以emailControl.value的类型是FormProp | null，而propList.add()要求传入的参数必须是FormProp类型，因此触发报错。

解决办法 #

你可以选择以下任意一种方式处理：

1. 非空断言（简单直接，适合确定value不会为null的场景） #

在emailControl.value后面加!，明确告诉TypeScript这个值一定非空：

propList.add(emailControl.value!);

2. 二次校验（更严谨，避免潜在空值问题） #

对emailControl.value再做一次空值判断：

if (emailControl.value) {
  propList.add(emailControl.value);
}

3. 显式指定FormControl泛型（从类型层面约束value非空） #

创建FormControl时明确指定泛型类型，让TypeScript知道这个控件的value不会是null：

const emailControl = new FormControl<FormProp>(
  emailControlValue,
  Validators.required
);
propList.add(emailControl.value);

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