React+TypeScript中Axios Context类型错误的原因及解决方法

错误核心原因 #

1. Context类型不匹配：你定义的GlobalProductsContext类型是productType[] | null，但Provider传递的value是包含data和setData的对象，两者类型完全不兼容，这是报错的直接原因。
2. 接口与API返回结构不符：fakestoreapi返回的产品数据是直接的对象数组（每个对象包含title、description、thumbnail等字段），但你定义的productType嵌套了一层product字段，ProductList还错误地用data包裹数组，和实际返回结构不匹配。
3. State类型定义错误：useState的类型应该对应API返回的数组类型，而不是你定义的ProductList。

修正后的代码 #

GlobalData.tsx #

import axios from "axios";
import { createContext, useEffect, useState, ReactNode } from "react";

// 单个产品的结构，匹配API返回
export interface SingleProduct {
  title: string;
  description: string;
  thumbnail: string;
  // 可根据API返回补充其他字段，比如id、price等
}

// Context的类型，包含数据和更新方法
type ProductsContextType = {
  data: SingleProduct[] | undefined;
  setData: React.Dispatch<React.SetStateAction<SingleProduct[] | undefined>>;
};

// 初始化Context，类型要和上面定义的一致
export const GlobalProductsContext = createContext<ProductsContextType>({
  data: undefined,
  setData: () => {},
});

// 修正children的类型为ReactNode，支持多个子元素
interface ContextChildrenProps {
  children: ReactNode;
}

export const ProductsContextProvider = ({ children }: ContextChildrenProps) => {
  // State类型改为SingleProduct数组，匹配API返回
  const [data, setData] = useState<SingleProduct[] | undefined>();

  useEffect(() => {
    axios.get<SingleProduct[]>('https://fakestoreapi.com/products')
      .then(res => {
        setData(res.data);
      })
      .catch(err => {
        console.error('请求失败:', err);
      });
  }, []);

  return (
    <GlobalProductsContext.Provider value={{ data, setData }}>
      {children}
    </GlobalProductsContext.Provider>
  );
};

SingleCard.tsx #

import React from 'react';
import { SingleProduct } from '../context/GlobalData';

// 直接接收SingleProduct类型的props，不需要嵌套product字段
const SingleCard = ({ product }: { product: SingleProduct }) => {
  return (
    <div className="col-lg-4 p-2" data-aos="flip-left">
      <div className="card" style={{ width: '100%', height: '100%' }}>
        <img src={product.thumbnail} className="card-img-top" alt={product.title} />
        <div className="card-body">
          <h5 className="card-title">{product.title}</h5>
          <p className="card-text">{product.description}</p>
          <a href="#" className="btn btn-primary">查看详情</a>
        </div>
      </div>
    </div>
  );
};

export default SingleCard;

关键修正点说明 #

• 重新定义ProductsContextType，让Context的类型和Provider传递的value结构完全匹配。
• 移除多余的productType和ProductList接口，直接用SingleProduct匹配API返回的真实数据结构。
• 将ContextChildrenProps的children类型改为ReactNode，支持多个子组件嵌套在Provider中。
• 给axios请求添加泛型<SingleProduct[]>，让TypeScript自动推断返回数据类型，类型检查更严谨。

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