Next.js通过id取输入值时报TypeScript: Object is possibly 'null'如何解决

报错原因 #

这个是TypeScript的类型安全提示：getElementById 方法在匹配不到对应ID的DOM元素时会返回null，TS不允许你直接对可能为null的值访问value属性。你可以按以下几种方案解决：

方案1：非空断言（快速修复，确认元素一定存在时用） #

你确定当前页面一定存在id为inputUsername的输入框，可以直接加!非空断言符告诉TS该元素不可能为null：

let inputValue = (window.document.getElementById('inputUsername') as HTMLInputElement)!.value

这里额外加了as HTMLInputElement类型断言，是因为getElementById默认返回的通用HTMLElement类型没有value属性，需要手动指定为输入框类型。

方案2：空值判断（更稳妥，避免运行时报错） #

先判断元素是否存在再取值，就算后续代码改动删除了对应输入框也不会触发运行时错误：

const usernameInput = window.document.getElementById('inputUsername') as HTMLInputElement | null
if (usernameInput) {
  const inputValue = usernameInput.value
  console.log(inputValue)
}

方案3：React推荐写法，用useRef绑定输入框（避免直接操作DOM） #

直接操作DOM不符合React的设计规范，更建议用useRef来绑定输入框获取值：

1. 先定义ref：

const usernameRef = React.useRef<HTMLInputElement>(null)

2. 给输入框绑定ref属性：

<input 
  type="text" 
  ref={usernameRef}
  className="form-control" 
  id="inputUsername" 
  name="inputUsername" 
  placeholder="Benutzername" 
  required 
/>

3. 点击登录时直接从ref取值：

const inputValue = usernameRef.current?.value

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