使用Context API实现购物车时遇UseContext is not a function错误求助

核心问题 #

你的Store组件是Next.js服务器组件（默认async函数组件为服务器组件），而useContext是React客户端钩子，仅能在客户端组件中调用，这就是报错的根本原因。

修复步骤 #

1. 将Store组件转为客户端组件 #

在组件顶部添加"use client";指令，标记这是一个客户端组件：

"use client"; // 新增客户端组件标记
import { ShoppingCartContext } from "@/app/context/ShoppingCartContext";
import { getData } from "@/app/data/fetchData";
import { ProductCardDescType } from "@/app/types/Product";
import ProductCard from "@/components/ProductCard/ProductCard";
import { useContext, useEffect, useState } from "react";

export default function Store() {
  const [products, setProducts] = useState<ProductCardDescType[]>([]);
  const [loading, setLoading] = useState(true);

  // 客户端组件中通过useEffect获取数据
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const data = await getData();
        setProducts(data);
      } catch (err) {
        console.error("获取商品数据失败:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  const { getItemQuantity } = useContext(ShoppingCartContext);

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>Store</h1>
      {products.map((product: ProductCardDescType) => (
        <ProductCard key={product.id} {...product} />
      ))}
    </div>
  );
}

2. 确认已有配置正确性（无需修改） #

• 你的ShoppingCartProvider已在RootLayout中正确包裹所有子组件，上下文传递逻辑正常。
• 上下文创建时的类型断言{} as ShoppingCartFunction符合类型定义要求（只要ShoppingCartFunction接口正确声明了所有操作函数）。

额外说明 #

Next.js中，服务器组件只能用于数据获取、静态渲染等无交互场景，无法使用useContext、useState等客户端钩子。若需实现交互逻辑或调用客户端API，必须转为客户端组件并添加"use client";指令。

内容的提问来源于stack exchange，提问作者Davi Sá