Next.js实现文字揭示动画报错：TypeError读取null的textContent属性

问题描述 #

跟着教程学习文字揭示动画，在Next.js中实现时触发以下错误：

TypeError: Cannot read properties of null (reading 'textContent')

尝试使用useRef但未解决，原代码如下：

'use client';

import { useState, useRef, useEffect } from "react";

import styles from './title.module.css';

import anime from "animejs";

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";


export default function Title() {

useEffect(() => {

    textWrapper = document.querySelector(`.${styles.title}`);
    textWrapper.innerHTML = textWrapper.textContent.replace(
        /\S/g,
        "<span className={styles.letter}>$&</span>"
    );

    anime.timeline().add({
        targets: ".${styles.title} .${styles.letter}",
        translateY: [-200, 0],
        easing: "easeOutExpo",
        duration: 1500,
    });
  

}, [])


    return (
        <section>
            <h1 className={styles.title}>Web Designer</h1>
        </section>
    )
}

错误原因 #

1. DOM节点获取时机问题：直接用document.querySelector可能在组件挂载阶段DOM还未完全渲染，导致返回null，无法读取textContent
2. 模板字符串使用错误：anime配置的targets中用双引号包裹模板字符串，无法解析${styles.title}这类变量，导致选择器无效
3. HTML字符串语法错误：替换innerHTML时用了JSX的className语法，原生HTML应该用class，且直接写{styles.letter}会被当成纯文本，无法正确绑定样式类

修正后的代码 #

'use client';

import { useRef, useEffect } from "react";
import styles from './title.module.css';
import anime from "animejs";

export default function Title() {
  // 创建ref绑定到标题元素
  const titleRef = useRef(null);

  useEffect(() => {
    // 确保DOM节点存在再执行操作
    if (!titleRef.current) return;

    const textWrapper = titleRef.current;
    // 替换每个字符为带样式类的span，注意用原生HTML的class属性
    textWrapper.innerHTML = textWrapper.textContent.replace(
      /\S/g,
      `<span class="${styles.letter}">$&</span>`
    );

    anime.timeline().add({
      // 通过ref获取元素，结合样式类选择后代节点
      targets: `${titleRef.current} .${styles.letter}`,
      translateY: [-200, 0],
      easing: "easeOutExpo",
      duration: 1500,
    });
  }, []);

  return (
    <section>
      {/* 将ref绑定到h1元素 */}
      <h1 ref={titleRef} className={styles.title}>Web Designer</h1>
    </section>
  );
}

关键修复点 #

• 使用useRef直接绑定目标DOM元素，避免依赖document.querySelector的不确定性，确保能稳定获取节点
• 增加DOM节点存在性检查，防止在未挂载时执行操作
• 替换innerHTML时使用原生HTML的class属性，并用模板字符串正确注入样式类名
• anime的targets使用模板字符串解析变量，确保选择器能匹配到生成的span元素

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