Next.js中MediaRecorder赋值useRef遇TypeScript类型错误求助

问题出在TypeScript对useRef的类型推断逻辑：当你初始化useRef(null)时，TypeScript会自动推断该ref的类型为MutableRefObject<null>，即它的current属性仅允许赋值null，但你后续试图存入MediaRecorder类型的实例，就会触发类型不匹配的警告。

解决方案一：显式指定联合类型（推荐） #

直接在useRef上声明它的类型可以是MediaRecorder或null，让TypeScript正确识别current的合法取值范围：

const mrRef = useRef<MediaRecorder | null>(null);

之后执行mrRef.current = mediaRecorder时，类型检查会正常通过，同时也保留了初始状态为null的合理性。

解决方案二：使用非空断言（谨慎使用） #

如果你能确保mediaRecorder一定会被成功创建（比如stream绝对有效），可以用非空断言跳过类型检查，但这种方式会绕过TypeScript的安全校验，存在潜在风险：

const mrRef = useRef<MediaRecorder>(null!);

额外提示 #

后续使用mrRef.current时，建议先做非空判断，避免空值调用报错：

if (mrRef.current) {
  // 执行MediaRecorder相关操作，比如start()、stop()
  mrRef.current.start();
}

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