全局使用use-shopping-cart遇TypeError：无法读取dispatch属性

问题根源 #

1. 子元素渲染错误：你的Cart组件里错误地渲染了字符串children，而非传入的子组件JSX表达式{children}，导致页面组件根本没被CartProvider包裹，调用useShoppingCart时找不到上下文。
2. 客户端组件标记缺失：在Next.js 13+的Pages Router中，_app.tsx默认是服务器组件，而CartProvider属于客户端组件，必须给包含它的Cart组件加上"use client"指令，确保在客户端环境初始化上下文。

修复方案 #

修改_app.tsx代码，做两处关键调整：

"use client"; // 新增：标记组件为客户端运行
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { CartProvider } from "use-shopping-cart";
import * as config from "../config";
import { ReactNode } from "react";

const Cart = ({ children }: { children: ReactNode }) => (
  <CartProvider
    cartMode="checkout-session"
    stripe={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string}
    currency={config.CURRENCY}
    shouldPersist={false}
  >
    {children} {/* 修复：正确渲染传入的子组件 */}
  </CartProvider>
);

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Cart>
      <Component {...pageProps} />
    </Cart>
  );
}

修复说明 #

• "use client"：告诉Next.js该组件需要在浏览器环境运行，因为CartProvider依赖React上下文，无法在服务器组件中初始化。
• {children}：将页面组件正确注入到CartProvider内部，确保所有页面都能访问购物车上下文。

修改后，全局调用useShoppingCart执行商品增删、结算等操作时，就能正常获取上下文，不会再抛出错误。

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