Axios异步请求返回类型与React Context定义不匹配的类型错误

问题核心 #

你遇到的类型错误本质是异步函数的返回值类型和Context预期的同步类型不匹配：getAuthJWT是异步函数，默认返回Promise<void | JWT>，但你的Context定义期望的是同步的void | JWT，所以类型校验报错。这跟Axios的void配置无关。

解决方案 #

方案1：让Context接受异步函数类型 #

如果你的业务逻辑就是需要通过异步函数获取JWT，直接修正Context的类型定义，使其匹配异步函数的返回值：

1. 重新定义Context类型：

interface AuthContextType {
  getAuthJWT: () => Promise<JWT | void>;
  // 其他需要的属性...
}

const AuthContext = React.createContext<AuthContextType | undefined>(undefined);

2. 确保getAuthJWT的实现符合类型：

const getAuthJWT = async (): Promise<JWT | void> => {
  try {
    const response = await axios.get<JWT>('/api/auth/jwt');
    return response.data;
  } catch (err) {
    console.error('获取JWT失败:', err);
    return; // 出错时返回void
  }
};

3. 传递给Provider的value就能正常匹配类型了：

<AuthContext.Provider value={{ getAuthJWT }}>
  {children}
</AuthContext.Provider>

方案2：在Context中存储同步的JWT值 #

如果希望Context直接提供JWT数据（而非获取它的异步函数），可以在Provider组件中提前异步获取JWT，把结果存在状态里再传递：

1. 调整Context类型：

interface AuthContextType {
  jwt: JWT | void;
  // 其他需要的属性...
}

const AuthContext = React.createContext<AuthContextType | undefined>(undefined);

2. 在Provider中异步获取并存储JWT：

const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [jwt, setJwt] = React.useState<JWT | void>(undefined);

  React.useEffect(() => {
    const fetchJWT = async () => {
      try {
        const res = await axios.get<JWT>('/api/auth/jwt');
        setJwt(res.data);
      } catch (err) {
        console.error('获取JWT失败:', err);
      }
    };
    fetchJWT();
  }, []);

  return (
    <AuthContext.Provider value={{ jwt }}>
      {children}
    </AuthContext.Provider>
  );
};

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