TypeScript中如何正确定义HTMLAudioElement类型的RefObject解决类型报错

• 核心冲突是你把MutableRefObject类型的Ref对象，直接赋值给了需要HTMLAudioElement类型的位置，Ref对象本身只持有.current属性，所有DOM实例的属性和方法都需要通过.current访问。
• 额外问题：你违反了React Hook使用规则，useRef作为Hook不能在dispatch参数、回调函数等非组件顶层的位置调用。

1. 调整useRef的调用位置，放在组件最顶层：

// 组件顶层调用Hook声明音频Ref
const audioRef = useRef<HTMLAudioElement | undefined>(new Audio(url));

// 后续再执行dispatch操作
dispatch({
  name: 'SET_AUDIO',
  audioRef: audioRef,
});

2. 所有操作音频实例的位置，都通过Ref的.current属性访问，配合可选链避免空值报错：

// 错误写法示例（会触发你遇到的类型报错）
audioRef.addEventListener('timeupdate', handleUpdate)
audioRef.play()

// 正确写法
audioRef.current?.addEventListener('timeupdate', handleUpdate)
audioRef.current?.play()

3. 确认你的Reducer Action类型定义中，SET_AUDIO动作对应的audioRef字段类型和AudioState中的定义完全一致，避免Action和State类型不匹配的问题：

// 示例Action类型定义
type AudioAction = 
  | {
      type: 'SET_AUDIO'
      audioRef: RefObject<HTMLAudioElement | undefined>
    }
  | {
      type: 'UPDATE_PLAY_STATE'
      playing: boolean
    }
  // 其他动作定义

可选优化：如果你的业务场景不需要把完整的Ref对象存在状态里，只需要持有音频实例，可以调整AudioState的定义，直接存储DOM实例，减少不必要的Ref嵌套：

export interface AudioState {
  audio: HTMLAudioElement | undefined;
  playing: boolean;
  progress: number;
  duration: number;
  volume: number;
}

// 对应的dispatch写法
const audioRef = useRef<HTMLAudioElement>(new Audio(url))
dispatch({
  name: 'SET_AUDIO',
  audio: audioRef.current
})

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