使用React-Router-V6+TypeScript时出现类型不匹配错误

错误原因 #

TypeScript的严格类型检查机制下，document.getElementById("root")的返回类型为HTMLElement | null（找不到对应元素时会返回null），但createRoot函数要求的参数类型是Element | DocumentFragment，不包含null类型，因此触发类型不匹配错误。

解决方法 #

以下三种方案可解决该问题，根据实际场景选择：

1. 非空断言操作符（!）

直接告知TypeScript目标DOM元素一定存在，适合确定HTML中必然有id="root"元素的场景：

createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />
);

2. 条件判断（最安全）

先检查元素是否存在，避免运行时找不到元素导致的错误：

const rootElement = document.getElementById("root");
if (rootElement) {
  createRoot(rootElement).render(
    <RouterProvider router={router} />
  );
} else {
  console.error("未找到id为root的DOM元素，请检查HTML结构");
}

3. 类型断言

强制将返回值类型断言为Element，效果与非空断言类似：

createRoot(document.getElementById("root") as Element).render(
  <RouterProvider router={router} />
);

推荐方案 #

优先选择条件判断的方式，它能优雅处理元素不存在的边界情况；若能确保项目中id="root"的元素必然存在，可使用非空断言或类型断言简化代码。

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