Gatsby拉取WordPress自定义文章类型生成页面返回404问题咨询

Gatsby 不会自动生成自定义子路径文件夹，所有页面的路径完全由你调用 createPage 时传入的 path 参数决定，生成静态文件时 Gatsby 会自动按照你定义的路径创建对应的目录结构，不需要手动新建文件夹。

你遇到404的核心原因大概率是两个：

1. 你在 gatsby-node.js 中查询待生成页面的文章数据时，没有包含自定义的 wpProject 类型内容，导致这类文章根本没有进入创建页面的流程
2. 路径规则和模板匹配规则不符合预期

具体修改方案 #

第一步：确认查询包含自定义文章类型

先检查你调用 createSinglePages 之前的 GraphQL 查询，是否已经将 wpProject 类型的内容纳入 posts 数组，示例查询结构参考：

query {
  allWpPost {
    nodes {
      __typename
      id
      uri
      slug
      # 其他你需要的字段
    }
  }
  allWpProject {
    nodes {
      __typename
      id
      uri
      slug
      # 其他你需要的字段
    }
  }
}

查询完成后需要把默认文章和自定义Project类型的数组合并后再传给 createSinglePages。

第二步：修改路径生成规则，适配自定义前缀

修改 createSinglePages 内的路径逻辑，单独处理Project类型的路径：

const createSinglePages = async ({ posts, gatsbyUtilities }) =>
  Promise.all(
    posts.map(({ previous, post, next }) => {
      // 自定义路径+模板匹配规则
      let pagePath
      let templateName
      if (post.__typename === 'WpProject') {
        // 按要求生成 /project/xxx 格式的路径
        pagePath = `/project/${post.slug}/`
        templateName = 'project'
      } else {
        pagePath = post.uri
        templateName = post.__typename.replace(`Wp`, ``).toLowerCase()
      }

      return gatsbyUtilities.actions.createPage({
        path: pagePath,
        component: path.resolve(`./src/templates/${templateName}.js`),
        context: {
          id: post.id,
          previousPostId: previous ? previous.id : null,
          nextPostId: next ? next.id : null,
        },
      })
    })
  )

第三步：校验排查其他问题

• 确认模板文件路径正确：你当前代码里模板目录是 src/templates（复数），如果你的模板实际放在 src/template（单数）需要统一路径
• 执行 gatsby clean 清除本地缓存后，再重新运行 gatsby develop 验证
• 确认WordPress后台的Project自定义文章类型开启了 show_in_rest 配置，否则Gatsby无法拉取到对应数据

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