Vue3.2+TS+Element Plus异步获取DOM时elementRef空值TS报错如何解决

报错原因 #

TS 推断你声明的 elementRef 类型为 null | unknown，不确定运行时是否一定有值，因此调用 validate 方法时会抛出空值风险的类型报错。

解决方法 #

你可以根据自己的编码习惯选以下任意一种方案：

• 方案1：使用非空断言（最简便）
  确定运行时提交函数触发时，表单已经完成挂载、ref 一定绑定成功的前提下，直接在变量后加 ! 告诉 TS 该值一定不为空：

  elementRef!.validate(async (valid: boolean) => {
    // 原有业务逻辑不变
  })
  

• 方案2：添加空值判断（最严谨）
  调用方法前先判断 ref 是否存在，TS 会自动识别判断后的类型，不再报错：

  const submit = (): void => {
    if (!elementRef) return
    elementRef.validate(async (valid: boolean) => {
      // 原有业务逻辑不变
    })
  }
  

• 方案3：先给 ref 标注正确类型再做类型断言
  首先从 Element Plus 导入 ElForm 的类型，给 ref 指定明确的类型标注，后续使用时做类型断言即可：

  import type { ElForm } from 'element-plus'
  // 声明时指定类型
  let elementRef = $ref<ElForm | null>(null)
  
  const submit = (): void => {
    (elementRef as ElForm).validate(async (valid: boolean) => {
      // 原有业务逻辑不变
    })
  }
  

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