构建Gatsby站点时出现#95313错误该如何解决？

#95313报错的核心原因是Gatsby静态HTML构建阶段运行在Node环境，此时/success/页面中调用的react-redux的useSelector钩子无法获取到Redux的store实例，store值为null进而触发类型错误。本地开发时因为是浏览器实时运行，Provider已经完成注入所以不会触发报错。

方案1：使用Gatsby适配的Redux插件 #

直接安装适配Gatsby的Redux相关插件，插件会自动在静态构建阶段和客户端运行阶段统一注入Redux Provider，不需要手动处理双端兼容逻辑。

方案2：双端统一配置Provider包裹 #

需要同时在项目根目录的gatsby-ssr.js（服务端渲染/构建阶段用）和gatsby-browser.js（客户端运行用）中配置根组件包裹逻辑，确保双端都能拿到store实例：

1. 先创建公共的Provider封装逻辑，比如src/utils/wrap-with-provider.js：

import React from 'react'
import { Provider } from 'react-redux'
import createStore from '../state/createStore' // 替换为你自己的store创建路径

export const wrapRootElement = ({ element }) => {
  const store = createStore()
  return <Provider store={store}>{element}</Provider>
}

2. 在gatsby-ssr.js和gatsby-browser.js中都加入以下代码：

export { wrapRootElement } from './src/utils/wrap-with-provider'

方案3：对客户端专属逻辑做环境判断 #

如果该页面的Redux逻辑仅需要在客户端运行，可以增加环境判断规避构建阶段的空值报错：

• 先判断当前是否为浏览器环境：const isBrowser = typeof window !== 'undefined'
• 仅当isBrowser为true时再执行useSelector相关逻辑，或者对store相关的返回值做可选链、默认值兜底处理。

方案4：关闭该页面的静态构建 #

如果这个页面不需要预渲染，可以直接配置该页面走客户端渲染，跳过静态构建步骤：
在/success/页面对应的组件文件中添加如下配置：

export const config = () => {
  return {
    flags: {
      PRERENDER: false
    }
  }
}

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