Vue中使用模板ref时出现TypeScript错误：object is possibly null

问题场景 #

通过ref="header"引用<h1>元素，尝试修改其CSS样式时触发TypeScript错误，相关代码如下：

const header = ref<HTMLElement | null>(null)

onMounted(() => {
  header.value.style.color = "red"
})

错误提示：Object is possibly 'null'（对象可能为null）

解决方案 #

你可以通过以下几种方式解决这个类型错误：

1. 使用可选链操作符（推荐） #

通过?.判断属性是否存在，避免null值导致的报错：

onMounted(() => {
  header.value?.style.color = "red"
})

2. 添加非空断言 #

如果你能确保onMounted钩子执行时DOM元素一定存在，可以用!告诉TypeScript该值不会为null：

onMounted(() => {
  header.value!.style.color = "red"
})

注意：如果实际运行时元素不存在，这种写法会导致运行时错误，需谨慎使用。

3. 条件判断检查 #

先判断header.value是否存在，再执行样式修改：

onMounted(() => {
  if (header.value) {
    header.value.style.color = "red"
  }
})

报错原因 #

你定义的ref类型为HTMLElement | null，TypeScript会严格校验null值——即使onMounted阶段DOM理论上已挂载，TypeScript无法自动确认这一点，因此需要开发者手动处理null的边界情况，避免潜在的运行时错误。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo