Vue/Nuxt 3报错：Cannot set properties of null (setting 'textContent')

报错原因 #

你遇到的Cannot set properties of null错误，核心原因是组件卸载后，randomizeText内部的200ms延迟定时器仍在执行：

• 路由离开组件时，onBeforeRouteLeave只清理了外层的wordChanger定时器，但randomizeText里嵌套的setTimeout没被清除。
• 组件卸载后，word.value对应的DOM引用会变为null，此时延迟触发的定时器尝试设置null的textContent，就会抛出错误。
• Chrome控制台未显示该错误，大概率是组件卸载后浏览器自动忽略了这类异步错误，而VSC开发控制台会完整捕获到这类后台错误。

修复方案 #

方案1：统一管理所有定时器

给内部的setTimeout也保存引用，在组件卸载/路由离开时一并清除：

<script setup>
import { ref, reactive, onMounted, onBeforeRouteLeave, onUnmounted } from 'vue'

const word = ref(null)
const words = reactive(['Word-1', 'Word-2'])
let i = 0
let wordChanger = null
let innerTimeout = null // 保存内部定时器引用

function randomizeText() {
  i = randomNum(i, words.length)
  const newWord = words[i]
  
  // 先清除未执行的内部定时器，避免叠加
  if (innerTimeout) clearTimeout(innerTimeout)
  innerTimeout = setTimeout(() => {
    if (word.value) { // 额外判断元素是否存在
      word.value.textContent = newWord
    }
  }, 200)
}

function randomNum(num, max) {
  let j = Math.floor(Math.random() * max)
  if (num === j) {
    return randomNum(num, max) // 修正原递归参数错误：传num而非i
  } else {
    return j
  }
}

onMounted(() => {
  randomizeText()
  wordChanger = setInterval(randomizeText, 4000) // 移到onMounted内初始化，避免提前执行
})

// 同时在路由离开和组件卸载时清理定时器
onBeforeRouteLeave(() => {
  clearInterval(wordChanger)
  clearTimeout(innerTimeout)
})

onUnmounted(() => {
  clearInterval(wordChanger)
  clearTimeout(innerTimeout)
})
</script>

<template>
  <span ref="word"></span>
</template>

方案2：设置前判断DOM有效性

如果不想管理多个定时器，也可以在操作DOM前先检查元素是否存在：

function randomizeText() {
  i = randomNum(i, words.length)
  const newWord = words[i]

  setTimeout(() => {
    // 先确认元素存在再设置内容
    if (word.value) {
      word.value.textContent = newWord
    }
  }, 200)
}

额外优化点 #

• 原代码randomNum递归时传参错误，将i改为num可避免递归逻辑异常。
• 原代码中wordChanger的初始化放在onMounted外部，会导致组件未挂载就启动定时器，移到onMounted内部更合理。

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