Gatsby构建静态页面失败，Netlify部署时/about页useCart相关报错

安全阿岳

2026-9-28

问题根因

你仅在gatsby-browser.js中配置了CartProvider包裹根组件，但Gatsby构建静态HTML的SSG阶段会执行gatsby-ssr.js的逻辑，该阶段没有注入CartContext，因此所有调用useCart()的位置拿到的上下文都是undefined，解构时报错。
即使/about页面本身没有调用useCart()，也会因为全局布局、导航栏、页脚等公共组件调用了useCart()而触发报错，所有页面构建时都会加载公共组件。

解决方案

在项目根目录新增gatsby-ssr.js文件（和gatsby-browser.js同级），写入以下代码，保证服务端渲染阶段也注入购物车上下文：

import React from 'react';
import { CartProvider } from './src/context/cart-context';

export const wrapRootElement = ({ element }) => (
  <CartProvider>{element}</CartProvider>
);

（可选加固）给useCart()函数增加兜底判断，避免未注入上下文时直接崩溃，修改cart-context.js中useCart的开头逻辑：

export const useCart = () => {
  const context = useContext(CartContext);
  // 上下文不存在时返回兜底空对象和空方法，避免解构报错
  if (!context) {
    return { checkout: {}, addItemToCart: () => {}, removeItemFromCart: () => {} };
  }
  const [checkout, dispatch] = context;
  // 剩余原有代码保持不变
}