Angular 12调用document.getElementById报Object is possibly 'null'如何解决

报错原因 #

这是TypeScript的类型安全提示：document.getElementById()如果找不到匹配ID的元素时会返回null，你直接访问返回值的.style属性，在运行时可能出现空指针报错，TS在编译阶段就会拦截这个风险，抛出该错误。

解决方案 #

方法1：添加空值判断（原生通用方案） #

先判断获取到的元素是否存在，再操作样式：

const targetEl = document.getElementById(elementId);
if (targetEl) {
  targetEl.style.visibility = 'hidden';
}

也可以用可选链运算符简化代码：

document.getElementById(elementId)?.style.visibility = 'hidden';

加了?.之后，TS会自动识别空值场景，找不到元素时会直接终止后续属性访问，不会抛出运行时错误，也不会触发编译报错。

方法2：使用非空断言（确认元素一定存在时用） #

如果你100%确定执行这段代码时，对应ID的元素已经渲染到页面上，不会出现空值，可以在变量后加!非空断言，告诉TS这个值一定不会是空：

document.getElementById(elementId)!.style.visibility = 'hidden';

注意：非空断言跳过了TS的类型校验，如果实际运行时元素不存在，还是会抛出空指针错误，需谨慎使用。

方法3：Angular 推荐的声明式控制显隐（最佳实践） #

Angular不推荐直接操作原生DOM，你可以用框架自带的指令控制元素显隐，完全规避DOM操作的空值风险：

1. 首先在组件类中定义一个控制显隐的布尔变量：

// 组件类代码
isElementVisible = true;

2. 在对应元素上绑定对应控制逻辑即可，和你原需求匹配的几种实现如下：

• 对应visibility属性的绑定（元素隐藏后仍占页面位置，和原逻辑效果完全一致）

<!-- 组件模板代码 -->
<div [style.visibility]="isElementVisible ? 'visible' : 'hidden'" id="你的元素ID">
  元素内容
</div>

需要隐藏时只要给isElementVisible赋值为false即可：

isElementVisible = false;

• 用[hidden]指令（元素隐藏后不占页面位置）

<div [hidden]="!isElementVisible" id="你的元素ID">元素内容</div>

• 用*ngIf指令（元素隐藏后会直接从DOM树移除，适合不需要保留元素状态的场景）

<div *ngIf="isElementVisible" id="你的元素ID">元素内容</div>

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