在Netlify部署Gatsby WordPress站点失败，search页location.state未定义报错

这个报错出现在Gatsby静态HTML构建阶段，核心原因是：/search/ 页面代码直接对location.state做结构赋值，但Gatsby构建时执行的是服务端预渲染逻辑，此时不存在前端路由跳转带来的location.state参数，该值为undefined，直接解构就会抛出类型错误，导致构建中断。

• 方案1：为location.state添加兜底默认值（最便捷，无需修改路由规则）
  直接修改src/pages/search.js第10行代码，添加默认值兜底：

// 原代码
// const { userQuery, searchQuery } = location.state
// 修改后
const { userQuery, searchQuery } = location.state || {}
// 若需要属性默认值可以写成
// const { userQuery = '', searchQuery = '' } = location.state || {}

如果业务逻辑要求必须有这两个参数才能展示搜索页，可以额外加判断逻辑，无参数时跳转回首页或者展示空状态：

useEffect(() => {
  if (!userQuery) {
    window.location.href = '/'
  }
}, [userQuery])

• 方案2：将搜索页设为客户端专属路由（适合不需要预渲染的动态页面）
  如果搜索页本身不需要被搜索引擎爬虫抓取，不需要生成静态HTML，可以在项目根目录的gatsby-node.js中添加如下配置，标记该页面为客户端渲染：

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  // 匹配搜索页路径
  if (page.path === '/search/') {
    // 标记为客户端路由，构建时不生成静态HTML
    page.matchPath = '/search/*'
    createPage(page)
  }
}

修改后Gatsby构建阶段不会再预渲染该页面，只会在用户客户端访问时加载执行代码，此时location对象可以正常获取前端路由参数。

• 方案3：添加运行环境判断
  也可以通过判断当前是否为浏览器环境，避免构建阶段执行需要客户端参数的代码：

const SearchPage = ({ location }) => {
  // 构建阶段返回加载占位
  if (typeof window === 'undefined') return <div>Loading...</div>

  // 浏览器环境才执行后续逻辑
  const { userQuery = '', searchQuery = '' } = location.state || {}
  // 剩余业务代码
}

修改完成后本地执行npm run build命令，确认本地构建可以正常完成没有报错，再推送到Netlify触发部署即可。

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