Next.js+TypeScript中useRef用WaveSurfer遇类型不兼容错误求助

核心问题 #

你遇到的Type 'WaveSurfer' is not assignable to type 'null'错误，本质是useRef默认类型推断为null，但后续赋值了WaveSurfer实例，两者类型不兼容。同时原代码存在重复创建实例的问题（useEffect无依赖会在每次组件渲染时执行）。

修复步骤 #

1. 指定useRef的正确类型：使用联合类型WaveSurfer | null，明确current属性既可以是null也可以是WaveSurfer实例。
2. 添加useEffect依赖数组：空数组确保WaveSurfer仅在组件挂载时创建一次。
3. 添加卸载清理逻辑：组件卸载时销毁WaveSurfer实例，避免内存泄漏。
4. 用React ref绑定DOM容器：替代ID选择器，更符合React组件化思想，避免DOM选择器的潜在问题。

修改后的完整代码 #

import WaveSurfer from "wavesurfer.js";
import { useEffect, useRef } from "react";

function Controlbar() {
  // 指定useRef的联合类型：WaveSurfer实例或null
  const waveFormRef = useRef<WaveSurfer | null>(null);
  // 用React ref绑定容器元素，替代ID选择器
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 确保容器元素存在再创建实例
    if (!containerRef.current) return;

    const wavesurfer = WaveSurfer.create({
      container: containerRef.current,
      waveColor: "#4F4A85",
      progressColor: "#383351",
      url: "assets/music.mp3",
    });

    waveFormRef.current = wavesurfer;

    // 组件卸载时销毁实例，清理资源
    return () => {
      wavesurfer.destroy();
      waveFormRef.current = null;
    };
  }, []); // 空依赖数组，仅挂载时执行

  return <div ref={containerRef}></div>;
}

export default Controlbar;

额外说明 #

• 若坚持使用ID选择器，需确保useEffect执行时DOM已挂载（Next.js客户端组件中useEffect会在客户端DOM就绪后执行，因此可行，但React ref的方式更可靠）。
• TypeScript要求明确useRef的类型范围，避免隐式类型推断导致的类型不兼容问题。

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