将Hook传入Context.Provider的value时TypeScript报错

安全阿岳

2026-8-24

解决Next.js购物车上下文setCart传入Provider的TypeScript错误

核心问题：上下文类型与传入值不匹配

这类错误几乎都是因为CartContext的类型定义和你传入Provider的value结构/类型不一致导致的，以下是针对性的解决步骤：

1. 补全并修正上下文类型定义

首先明确购物车项和上下文的类型，确保包含cart和setCart，且setCart的类型和useState返回的调度函数一致：

import { createContext, useState, useContext, ReactNode } from 'react';

// 定义单个购物车商品的类型
type CartItem = {
  id: string;
  name: string;
  quantity: number;
  price: number;
  // 按需添加其他字段
};

// 定义购物车上下文的完整类型
type CartContextType = {
  cart: CartItem[];
  // 这里的类型要和useState返回的setCart完全匹配
  setCart: React.Dispatch<React.SetStateAction<CartItem[]>>;
};

// 创建上下文时，给一个兼容的默认值（或设为可选类型）
const CartContext = createContext<CartContextType | undefined>(undefined);

2. 确保Provider传入完整且类型匹配的value

在CartProvider组件中，把useState生成的cart和setCart完整传入value：

export function CartProvider({ children }: { children: ReactNode }) {
  const [cart, setCart] = useState<CartItem[]>([]);

  // 直接传入{ cart, setCart }，不要解构或修改类型
  return (
    <CartContext.Provider value={{ cart, setCart }}>
      {children}
    </CartContext.Provider>
  );
}

3. 用自定义hook安全获取上下文

避免直接使用useContext时拿到undefined，写一个封装的hook：

export function useCart() {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart 必须在 CartProvider 内部使用');
  }
  return context;
}