使用useContext时遭遇TS2322类型错误：Provider传递状态与函数时的类型不兼容问题

这个错误的核心问题出在你对Auth接口的定义上——你现在的写法把Auth声明成了一个可调用的函数类型，但你实际需要的是一个包含状态和方法的普通对象类型，这直接导致了类型不匹配。

第一步：修正Auth接口的定义 #

把AuthContext.tsx里的Auth接口改成下面的形式，明确将login和logout作为对象的方法属性来定义：

// AuthContext.tsx
import { createContext } from "react";

interface Auth {
  userId: string | null;
  token: string | null;
  isLoggedIn: boolean;
  // 声明login为方法，参数和返回值类型匹配你的实现
  login: (token: string, uid: string) => void;
  // 声明logout为无参数无返回值的方法
  logout: () => void;
}

export const AuthContext = createContext<Auth | null>(null);

为什么原来的写法不对？ #

你原来接口里的这两行是函数调用签名：

(t:string | null, id:string | null) : void;
(): void;

它表示Auth类型的变量本身是一个可以被直接调用的函数（比如const auth: Auth = () => {}），而不是表示这个对象拥有login或logout方法。这就导致TypeScript认为你传递给Provider的value对象不符合Auth类型——因为它不是一个可调用的函数，而且login/logout属性在你原来的Auth类型里根本不存在。

第二步：验证类型匹配 #

修正接口后，你在App.tsx中传递的value对象：

{
  userId: userId,
  token: token,
  isLoggedIn: !!token,
  login: login,
  logout: logout
}

就完全符合Auth接口的定义了：

• userId和token是string | null类型，与接口匹配
• isLoggedIn是boolean类型，与接口匹配
• login的类型(token: string, uid: string) => void，与接口定义一致
• logout的类型() => void，与接口定义一致

此时TS2322错误应该会完全消失。

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