如何自定义Gatsby Schema实现MDX可选featureImage字段正常使用

问题根源 #

你当前的错误来自gatsby-node.js里错误的类型声明：MdxFrontmatter是MDX节点的内置子字段，不是独立的Node节点类型，你给它加了implements Node声明后，Gatsby会错误地把它识别为独立节点，无法正确关联featureImage对应的图片File节点，所以存在featureImage字段时反而会解析失败。

修改步骤 #

1. 替换gatsby-node.js中的类型定义

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type Mdx implements Node {
      frontmatter: MdxFrontmatter
    }
    type MdxFrontmatter {
      featureImage: File @fileByRelativePath
    }
  `;
  createTypes(typeDefs);
};

新增的@fileByRelativePath指令会告诉Gatsby，featureImage字段的值是文件相对路径，需要自动解析为对应的File节点，兼容字段存在/不存在两种场景。
2. 补充组件判空逻辑
在你渲染GatsbyImage的ContentCard组件中，新增图片存在性判断，避免空值触发prop类型校验报错：

// ContentCard 组件内部示例
const { frontmatter } = props
const imageData = frontmatter.featureImage?.childImageSharp?.gatsbyImageData

return (
  <div>
    {imageData && <GatsbyImage image={imageData} alt={frontmatter.title} />}
    {/* 其他卡片内容 */}
  </div>
)

3. 清理缓存重启服务
   执行以下命令清除旧缓存后重启开发服务即可：

gatsby clean && gatsby develop

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