TypeScript调用document.getElementById报document未定义如何修复

这个报错的核心原因是document是浏览器专属的DOM全局API，不存在于非浏览器运行环境，或是TS编译配置未引入DOM类型声明，对应不同场景按下面的方法处理即可：

• 编译阶段IDE就飘红报类型错误
  直接修改项目根目录的tsconfig.json，在compilerOptions.lib配置项中加入"DOM"，引入浏览器DOM的类型定义：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "lib": ["ESNext", "DOM"], // 新增DOM项，保留你原有其他lib配置
      // 其余原有配置保持不变
    }
  }
  

  配置修改后重启TS服务即可生效，VS Code用户可通过快捷键Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）调出命令面板，执行TypeScript: Restart TS Server快速重启。
• 运行阶段抛错，常见于Node环境执行、SSR服务端渲染场景
  Node环境、SSR构建的服务端执行阶段本身就没有浏览器的window/document对象，哪怕类型配置正确，运行时依然会抛错。需要加环境判断，确保DOM相关逻辑只在浏览器端执行：

  // 仅在浏览器环境下执行DOM操作
  if (typeof document !== 'undefined') {
    const targetEl = document.getElementById('your-dom-id');
    // 其余DOM相关逻辑全部放在判断块内
  }
  

  如果使用Next.js、Nuxt这类自带SSR能力的框架，可直接用框架提供的客户端运行机制：比如Next.js在组件顶部加'use client'标记，Nuxt将DOM逻辑放在onMounted生命周期内，这类机制会自动保证对应代码只在浏览器端执行。
• 单元测试执行时报错
  Jest、Vitest等单测工具默认运行在Node环境，无内置DOM API，可修改测试配置将运行环境切换为jsdom，用jsdom模拟浏览器DOM环境即可：

  // vitest.config.ts 示例
  import { defineConfig } from 'vitest/config'
  export default defineConfig({
    test: {
      environment: 'jsdom', // 加这一行
    },
  })
  

  Jest用户则在jest.config.js中添加配置项testEnvironment: 'jsdom'即可。

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