TypeScript环境用useContext遇TS2558错误：期望0个类型参数却传1个

问题场景 #

使用React ^18.2.0 + TypeScript ^5.0.4，在调用useContext<IDBDatabaseContext>时出现报错，相关代码如下：

interface IDBDatabaseContext {
  db: IDBDatabase | null
}

const DBcontext = createContext<IDBDatabaseContext>({db: null})

排查与解决步骤 #

• 确认React API导入正确
  确保代码顶部已导入createContext和useContext：

  import { createContext, useContext } from 'react';
  

  漏导API是这类报错的常见原因。

• 检查TypeScript的DOM类型支持
  IDBDatabase是浏览器IndexedDB的DOM类型，若tsconfig.json的lib配置未包含dom，会导致类型无法识别。修改tsconfig.json：

  {
    "compilerOptions": {
      "lib": ["dom", "dom.iterable", "esnext"]
    }
  }
  

• 规范useContext的使用方式
  由于DBcontext已通过createContext<IDBDatabaseContext>指定了泛型，组件中使用时无需手动重复指定泛型，TypeScript会自动推导类型：

  // 推荐写法，自动推导类型
  const { db } = useContext(DBcontext);
  
  // 若需手动指定，确保泛型与上下文一致
  const { db } = useContext<IDBDatabaseContext>(DBcontext);
  

  重复指定泛型时若出现类型不匹配，也会触发报错。

• 确保接口与初始化值一致
  当前初始化值{db: null}符合IDBDatabaseContext接口定义，后续修改接口时需同步更新初始化值，避免类型冲突。

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