ReactDOM.createPortal在JS运行正常但TypeScript报getElementById类型错误

1. 类型报错修复 #

报错的核心原因是TypeScript静态类型检查中，document.getElementById的返回值类型定义为HTMLElement | null，TypeScript无法预知运行时该DOM节点一定存在，所以会抛出类型不匹配的错误。你可以任选以下一种方案解决：

• 非空断言（最简单，适用于100%确定节点存在的场景）
  在获取节点的语句末尾加!，告诉TypeScript该值一定不为空：

  return ReactDOM.createPortal(
    <>
      <CartModal />
    </>, 
    document.getElementById('overlay-root')!
  )
  

• 类型断言
  强制将返回值的类型指定为Element：

  document.getElementById('overlay-root') as Element
  

• 运行时兜底检查（最稳妥）
  先判断节点是否存在，不存在的话抛出明确错误或者创建兜底节点，既过类型检查也能避免运行时真的不存在导致的崩溃：

  const DisplayCartModal: React.FC<CartModalProps> = (props) => {
    const overlayRoot = document.getElementById('overlay-root')
    if (!overlayRoot) {
      throw new Error('DOM中未找到id为overlay-root的节点')
    }
    return ReactDOM.createPortal(
      <>
        <CartModal />
      </>, 
      overlayRoot
    )
  }
  

2. TSX文件语法高亮修复 #

你改成.js后缀后高亮恢复，本质是.tsx后缀的文件识别出了问题，按以下步骤排查即可：

• 确认你的文件后缀为.tsx，只要文件内包含JSX语法，TypeScript要求必须使用.tsx后缀，不能用.ts
• 查看VSCode底部状态栏的文件类型标识，确认识别为TypeScript React，如果识别为其他类型，点击该标识手动选择TypeScript React即可
• 确认VSCode自带的「TypeScript and JavaScript Language Features」扩展处于开启状态，不要禁用该扩展
• 如果是缓存导致的高亮异常，按Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，输入TypeScript: Restart TS Server执行，重启TypeScript语言服务即可恢复

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