Gatsby构建失败：useContext实现暗色主题报对象不可作为React子元素错误

• 上下文配置仅对客户端生效：你只在gatsby-browser.js中配置了DarkThemeProvider包裹根元素，但Gatsby静态HTML构建属于服务端渲染（SSR）阶段，只会读取gatsby-ssr.js中的配置。SSR阶段上下文没有被Provider包裹，所有调用useDarkThemeContext的组件只会拿到createContext初始化时定义的{darkMode: false, setDarkMode: () => {}}对象。
• 存在对象直接渲染的写法：当代码中某处在JSX里直接输出了上述上下文对象（比如误写为<div>{useDarkThemeContext()}</div>），就会触发「对象不能作为React子元素」的报错。

1. 补充SSR阶段的上下文配置
   在项目根目录新建gatsby-ssr.js文件，写入和gatsby-browser.js完全一致的根元素包裹逻辑，保证两端上下文一致：

import React from "react"
import { DarkThemeProvider } from './src/pages/components/DarkThemeContext/DarkThemeContext'

export const wrapRootElement = ({ element }) => {
  return <DarkThemeProvider>{element}</DarkThemeProvider>
}

2. 排查错误的JSX渲染写法
   全局搜索所有调用useDarkThemeContext的组件，确认没有直接将上下文返回的对象作为子元素渲染到JSX中的错误写法。如果存在类似{useDarkThemeContext()}的代码，改为读取对象内部的属性使用即可。

3. 可选：添加上下文钩子的调用校验
   修改DarkThemeContext.js中的自定义钩子逻辑，加入未在Provider下调用的报错提示，方便后续定位问题：

const useDarkThemeContext = () => {
  const context = useContext(DarkThemeContext)
  if (!context.setDarkMode) {
    throw new Error('useDarkThemeContext 必须在DarkThemeProvider内部使用')
  }
  return context
}

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