React+TypeScript获取元素值报错，如何修复？

核心问题拆解 #

• DOM获取时机不对：组件函数执行时，JSX还没渲染到浏览器DOM里，直接调用document.getElementById('bla')只能拿到null，后续访问属性必然报错。
• 类型断言完全错误：你把h1元素断言成HTMLInputElement.value，这根本不成立——h1对应的类型是HTMLHeadingElement，而且它没有value属性，要拿文本内容得用textContent或innerText。
• 错误嵌入script标签：React组件的JSX里不能这么加<script>，项目脚本逻辑直接写在组件或单独ts文件里就行，不需要手动引入。

修正后的代码 #

import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"
import { useEffect } from 'react';

function App() {
  // 用useEffect确保DOM渲染完成后再操作元素
  useEffect(() => {
    const headingElement = document.getElementById('bla') as HTMLHeadingElement;
    if (headingElement) {
      console.log(headingElement.textContent); // 获取h1的文本内容
    }
  }, []); // 空依赖数组保证只执行一次

  return (
    <>
      <div className="p-6 space-y-6">
        <div className="flex justify-center">
          <div className="flex justify-between w-1/2">
            <h1 id="bla">bla bla bla</h1>
            <Input id="pokemonInput" placeholder="Pokemon name" className="border rounded w-1/2"/>
            <Button>Pesquisar</Button>
          </div>
        </div>

        <div className="flex justify-center">
          <img src="" id="pokemonImage" className="border rounded w-1/2"/>
        </div>
      </div>
    </>
  )
}

export default App

额外提示 #

• 尽量少直接操作DOM：React更推荐用状态管理处理数据，比如如果需要用到h1的文本，直接在组件里定义变量就行，没必要去DOM里读取。
• 类型断言要匹配：对DOM元素断言时，要对应正确的HTML元素类型，比如Input组件对应HTMLInputElement，h1对应HTMLHeadingElement。

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