TypeScript报错：未找到名称data，React Query数据无法在JSX中访问

问题根源 #

1. 违反React Hooks规则：React Hooks（包括useQuery）不能放在if这类条件判断语句里，必须在组件的顶层作用域调用，否则会破坏React的状态更新机制。
2. 变量作用域限制：你在if (token)代码块里声明的data，作用域只限于这个块内部，组件返回的JSX属于外部作用域，自然找不到这个变量。

修正后的代码 #

const Navbar = () => {
  const token = getFromStorage("token");

  // 把useQuery移到组件顶层，用enabled控制请求触发时机
  const { data, error } = useQuery(
    ["username", token],
    () => getCurrentUser(token),
    { enabled: !!token } // token存在时才发起请求，等价于token.length > 0
  );

  return (
    <div className="flex items-center w-full custom-container  self-center py-3 px-4 ">
      <Link href="/">
        <a className="text-2xl text-pgreen font-bold"> conduit</a>
      </Link>

      <div className="flex ml-auto ">
        <ul className="">
          <Link href="" className=" ">
            <a className="text-gray-400 text-base hover:text-gray-600   w-fit h-fit pr-3 ">
              Home
            </a>
          </Link>

          {token && data ? (
            <Link href="" className="">
              <a className="text-gray-400 text-base hover:text-gray-600  w-fit h-fit pr-3">
                {data?.user?.username}
              </a>
            </Link>
          ) : null}
        </ul>
      </div>
    </div>
  );
};

修正说明 #

• 把useQuery移到组件顶层，满足Hooks的使用规则。
• 通过enabled选项控制请求：!!token会把token转换成布尔值，只有当token存在时才会执行请求，和你原本的逻辑完全一致。
• 此时data变量在组件整个作用域内都能访问，JSX里就不会再出现“cannot find name”的错误了。

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