Strapi Next.js企业版Starter自定义组件不显示问题求助

已完成操作 #

• 在Strapi后台创建名为External link的组件
  
• 将该组件添加到Page的contentSection动态区域
  
• 编写React组件代码：

import React from "react"
const ExternalLink = ({ data }) => {
  return (
    <div className="py-10 text-center">
      <div className="flex flex-col items-center">
        <a href={data.address}>{data.title}</a>
      </div>
    </div>
  )
}

export default ExternalLink

• 在sections.js的sectionComponents中注册组件：

ComponentSectionsExternalLink: ExternalLink,

• 在Strapi后台首页添加该组件
  

问题 #

组件未从Strapi获取数据到前端，页面无显示

排查建议 #

1. 核对组件名称映射：
   Strapi组件的__component字段格式一般为component.{section}.{component-name}，确认sections.js中注册的ComponentSectionsExternalLink是否和接口返回的__component值完全匹配（注意大小写、连字符转驼峰的规则）。
2. 检查API返回数据：
   调用页面接口（如/api/pages/[id]），查看返回的contentSection数组里是否包含该组件的完整数据，确认address和title字段存在且有值。
3. 验证数据传递逻辑：
   确认动态区域的渲染组件（如SectionRenderer）是否正确将组件数据传递给ExternalLink，是否存在数据解构或传递错误。
4. 检查组件导入：
   确认sections.js中ExternalLink组件的导入路径正确，没有拼写错误。
5. 查看控制台报错：
   检查浏览器控制台是否有JavaScript错误（如未定义变量、路径错误），这些可能导致组件无法渲染。

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