如何获取带Frontmatter的Markdown正文？代码返回undefined的解决办法

你当前代码里调用frontmatter.body会返回undefined，核心原因是Markdown文件的正文内容根本不在frontmatter里——frontmatter只是文件顶部的元数据区块（比如标题、日期这类配置信息），正文是独立于frontmatter的单独部分。

解决方法按以下步骤来：

• 先确认数据结构
  检查你获取latest数组的逻辑，正常解析后的Markdown数据结构应该类似这样：

  {
    url: "xxx",
    frontmatter: { title: "xxx", date: "xxx" }, // 仅存元数据
    content: "这里是Markdown正文内容" // 正文单独存放在某个字段（字段名可能是content/body/html/rawMarkdownBody，取决于你用的解析工具）
  }
  

• 修改渲染代码
  把frontmatter.body换成实际的正文字段，比如如果正文字段叫content，代码改成：

  {latest.map(({ url, frontmatter, content }) => (<PostCard url={url} content={content}/>))}
  

• 排查静态站点工具配置
  如果你用Gatsby、Next.js这类工具，要确保对应的Markdown/MDX插件正确提取了正文：

  • Gatsby的gatsby-transformer-remark会把原始Markdown正文放在rawMarkdownBody，编译后的HTML放在html字段
  • Next.js的next-mdx-remote会把编译后的内容放在content字段

• 打印数据调试
  实在不确定字段名，直接在map里打印每个项的结构，一目了然：

  {latest.map(item => {
    console.log(item); // 查看控制台输出的结构，定位正文所在字段
    return <PostCard url={item.url} content={item.content}/>;
  })}
  

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