使用Gatsby搭建无头WordPress网站时出现createFiberFromTypeAndProps运行时错误的解决咨询

看起来你在把WordPress当CMS搭无头站点时踩了个常见的组件导入导出的坑，别慌，我帮你梳理几个排查和解决的方向：

• 优先检查组件导入导出的匹配问题
  这个错误提示已经点明了核心：组件类型不合法，大概率是默认导入和命名导入搞混了。你得仔细排查PageRenderer渲染的所有组件：

  • 如果某个组件是用export default MyComponent默认导出的，那导入时必须用import MyComponent from './component-path'（不能加花括号）；如果是用export const MyComponent命名导出的，就得用import { MyComponent } from './component-path'（必须加花括号）。
  • 还要注意有没有不小心把非组件的对象/变量当组件渲染了，比如导入了某个配置文件里的对象，却在render里写了<ThatObject />，这种情况也会触发这个错误。

• 检查Gatsby页面模板与数据层的组件
  因为是无头WordPress场景，你肯定用到了页面模板来渲染WP拉取的内容：

  • 先看你在gatsby-node.js里创建页面时指定的模板路径是否正确，有没有拼写错误？
  • 再打开对应的页面模板文件，确认组件是否正确导出了——比如是不是漏写了export default？
  • 那些用来渲染WP文章/页面的子组件（比如PostCard、PageContent这类），也得逐一检查它们的导出和导入是否合规。

• 清理Gatsby缓存再试
  Gatsby的缓存有时候会残留旧的组件引用，导致奇怪的错误。你可以手动删除项目根目录下的.cache和public文件夹，然后重新运行gatsby develop：

  • Mac/Linux终端执行：rm -rf .cache public
  • Windows命令行执行：rmdir /s .cache public
    清理完缓存再启动开发服务，很多时候这类诡异的组件错误会直接消失。

• 排查依赖版本兼容性
  有时候React、ReactDOM和Gatsby的版本不匹配也会触发这类底层渲染错误。你可以查看项目的package.json，确认react、react-dom和gatsby的版本是否在官方推荐的兼容范围内——如果版本差得比较大，试着升级或降级到兼容的版本。

• 用排除法缩小问题范围
  如果上面的方法都没找到问题，那就用最笨但最有效的排除法：
  先把PageRenderer对应的页面模板简化到极致，比如只渲染一个<div>测试内容</div>，看看还会不会报错。如果不报错了，再一点点把原来的组件、数据渲染逻辑加回去，加到哪一步报错，那问题就出在刚加的内容上。

按照这个顺序排查下来，大概率能快速定位并解决问题，毕竟这类错误90%以上都是导入导出的小疏漏、缓存残留或者版本不兼容导致的。

内容来源于stack exchange