React播放/暂停按钮代码Vercel编译遇TS错误，如何解决？

问题根源 #

1. 未明确指定audioRef的类型，导致TypeScript无法识别其为HTMLAudioElement实例
2. 错误使用非空断言!，触发类型推断异常，最终导致audio被判定为never类型，无法识别play()/pause()方法

修复方案 #

1. 正确定义audioRef的类型 #

使用useRef时显式声明类型为HTMLAudioElement | null，初始值设为null：

import { useRef, useState } from 'react';

// 明确指定ref的类型
const audioRef = useRef<HTMLAudioElement | null>(null);
const [isPlaying, setIsPlaying] = useState(false);

2. 修改handlePlay函数，通过条件判断实现类型收窄 #

放弃非空断言，改用条件判断确认audio存在，TypeScript会自动收窄其类型：

const handlePlay = () => {
  const audio = audioRef.current;
  // 先校验audio存在性，再判断播放状态
  if (audio && audio.paused) {
    audio.play();
    setIsPlaying(true);
  } else if (audio) {
    audio.pause();
    setIsPlaying(false);
  }
};

补充说明 #

• 条件判断audio && audio.paused会让TypeScript确认audio是有效的HTMLAudioElement实例，后续调用方法时不会触发类型错误
• 这种方式比非空断言更安全，能避免运行时可能出现的null引用异常

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