TypeScript中Loading状态设置报错，状态判定异常求助

错误根源 #

你遇到的类型报错和状态误判，核心问题是误用了Boolean对象类型而非原始boolean类型：

• useState<Boolean>(false)里的<Boolean>指定的是布尔包装对象的类型，而true/false是原始布尔值（boolean类型），两者类型不兼容，所以TypeScript会提示“类型无重叠”的错误。
• 同时，TypeScript对Boolean对象类型的状态推断存在缺陷，导致错误判定loading始终为false。

解决步骤 #

1. 修正状态类型定义
   把useState<Boolean>(false)改成以下两种写法之一：

   • 显式指定原始boolean类型：

     const [loading, setLoading] = useState<boolean>(false);
     

   • 省略类型让TS自动推断（推荐，初始值false会让TS自动识别为boolean类型）：

     const [loading, setLoading] = useState(false);
     

2. 验证状态逻辑
   修正类型后，loading === true的比较会完全符合TS类型检查规则，同时TS能正确识别loading状态的可变性（可在true和false间切换），不会再误判状态始终为false。

完整示例代码 #

import { useState } from 'react';

const SubmitComponent = () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    try {
      // 替换为你的接口请求逻辑
      await fetch('/api/submit-data');
    } catch (error) {
      console.error('提交失败:', error);
    } finally {
      // 模拟接口响应延迟后重置状态
      setTimeout(() => {
        setLoading(false);
      }, 1000);
    }
  };

  return (
    <div>
      {!loading ? (
        <>
          {/* 页面展示元素 */}
          <h2>提交表单</h2>
          <button onClick={handleSubmit}>Submit</button>
        </>
      ) : null}
    </div>
  );
};

export default SubmitComponent;

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