Vue3中ref(null)报‘never类型不存在scrollHeight/clientHeight’错误的解决

当你用ref(null)初始化时，TypeScript会自动推断这个ref的类型为Ref<null>——也就是它的值只能是null，无法被赋值为DOM元素。所以在informationRefStatus函数中，element的类型是null，尝试访问scrollHeight/clientHeight这些DOM元素特有的属性时，TypeScript会直接报错，因为null类型上不存在这些属性，最终类型收窄为never，触发你看到的错误。

而ref()（无参数）初始化时，TypeScript推断的类型是Ref<undefined>，当你通过v-ref绑定DOM元素后，这个ref的类型会自动拓宽为Ref<HTMLElement | undefined>，此时用可选链element?.scrollHeight访问属性是合法的，所以不会报错。

给ref指定明确的联合类型，明确它可以是DOM元素或null：

import { ref } from 'vue'

// 指定类型为 HTMLElement | null
const information = ref<HTMLElement | null>(null)

function informationRefStatus() {
  const element = information.value
  isTextTruncated.value = element?.scrollHeight > element?.clientHeight
}

这样TypeScript就知道这个ref的值既可以是null，也可以是DOM元素，后续通过可选链访问属性时就不会触发类型错误。

如果你的元素是特定类型的DOM节点（比如<div>对应HTMLDivElement），也可以指定更精确的类型，让类型检查更严格：

const information = ref<HTMLDivElement | null>(null)

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