React中useRef调用addTrack报MediaStream类型错误如何解决

这个问题的核心是TypeScript的类型收窄基于静态控制流分析，收窄效果不会跨函数回调边界保留：

• 外层的if (myStreamRef.current)判断，仅能在当前同步代码块内把myStreamRef.current的类型从MediaStream | undefined收窄为MediaStream。
• forEach传入的回调是闭包，会延迟执行。TypeScript无法静态保证从外层判空完成，到回调实际执行的这段时间里，没有其他逻辑把可变的myStreamRef.current重新设为undefined——毕竟ref的current属性本身就是可读写的，出于类型安全考虑，TS不会把外层的收窄结果沿用到回调内部，回调里读取到的类型仍然是初始的MediaStream | undefined，就会抛出类型不匹配错误。
• 回调内额外加判空之所以能解决问题，是因为这层判断处于回调自身的控制流内，TS可以直接在回调作用域完成类型收窄。

优先推荐无冗余、类型安全的写法，按推荐度排序：

• 方案1：外层判空后将ref值存为本地常量
  本地const常量不可重新赋值，TypeScript可以确定它从判空到回调执行期间不会发生变化，类型收窄效果可以安全保留，同时也避免了执行过程中ref值变动导致的逻辑异常：

  const myStreamRef = useRef<MediaStream>();
  // ...其他逻辑
  const currentStream = myStreamRef.current;
  if (currentStream) {
    currentStream.getTracks().forEach((track) => {
      peerRef.current?.addTrack(track, currentStream);
    });
  }
  

• 方案2：明确ref的非空属性（适合赋值时机完全可控的场景）
  如果你可以100%保证在相关逻辑执行前，ref一定已经完成赋值，且使用过程中不会被置为undefined，可以在初始化ref时通过非空断言标注类型，省去后续所有判空：

  // 用null!做初始值，标记ref的current永远是MediaStream类型
  const myStreamRef = useRef<MediaStream>(null!);
  

  注意：这个方案放弃了部分类型检查，需要你自己保证ref赋值逻辑的严谨性，否则可能出现运行时错误。
• 不推荐方案：传参时加非空断言
  仅在临时调试等场景可以用，手动告诉TS该值一定存在，没有任何安全保障：

  if (myStreamRef.current) {
    myStreamRef.current.getTracks().forEach((track) => {
      // 手动加!断言不为空
      peerRef.current?.addTrack(track, myStreamRef.current!);
    });
  }
  

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