TypeScript React中getElementById不存在于never[]类型报错如何解决

核心问题定位 #

TS 提示getElementById在never[]类型上不存在，说明你当前代码里用到的document不是浏览器全局的Document类型对象，而是被当前作用域内的一个类型为never[]的同名局部变量覆盖了，这也是其他页面相同代码能正常运行的核心原因：其他页面没有定义重名的document局部变量，默认调用的是全局对象。

修复步骤 #

• 优先排查当前函数、当前组件作用域内是否声明了名为document的变量，例如let document = []、const document = []、let document;这类代码，直接修改变量名避免和全局对象重名即可解决问题
• 如果没有找到显式声明的同名变量，检查当前文件的导入语句，是否有误导入名为document的模块/变量

兜底兼容写法 #

如果需要避免全局对象被局部变量覆盖的问题，可以主动指定从window上取全局document对象：

let accountNumber = (window.document.getElementById("lash-phone") as HTMLInputElement).value;

React 项目优化建议 #

React 项目不推荐直接用getElementById操作 DOM，更符合开发规范的写法是通过useRef绑定对应元素：

import { useRef } from 'react';

// 组件内声明ref
const phoneInputRef = useRef<HTMLInputElement>(null);

// input 元素绑定 ref
<input id="lash-phone" ref={phoneInputRef} />

// 取值逻辑
const accountNumber = phoneInputRef.current?.value ?? '';

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