如何在Next.js 13中通过Strapi API获取JSON数组内的数据？

疑问解答与解决方案 #

1. Strapi Richtext API是否已更新为对象结构而非字符串？ #

是的，Strapi v4及后续版本中，默认的Rich Text Blocks（基于Slate编辑器的富文本类型）返回的是结构化对象数组，而非纯字符串；而Markdown富文本类型则直接返回字符串内容，和你补充的信息完全一致。

2. 如何访问JSON中的对象数组并渲染富文本？ #

针对Rich Text Blocks的对象数组结构，有两种常见处理方式，同时需要排查content值为undefined的路径问题：

先排查数据路径问题

控制台能打印目标文本但组件中content为undefined，大概率是数据传递的层级错误：

• 确认API返回的content字段层级，比如是否是data.attributes.content，而非直接data.content
• 在组件中打印传入的完整info对象，验证content属性是否存在

示例页面数据获取（Next.js 13 App Router）：

async function getInfoBlock() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/info-blocks?populate=*`);
  const data = await res.json();
  // 返回包含title、content的属性对象，确保层级正确
  return data.data.attributes;
}

export default async function Page() {
  const info = await getInfoBlock();
  return <InfoBlock info={info} />;
}

方式一：提取纯文本内容

如果只需要展示无格式的纯文本，可手动遍历数组提取文本：

// INFOBLOCK组件
export default function InfoBlock({ info }) {
  const getPlainText = (blocks) => {
    return blocks
      .map(block => block.children.map(child => child.text).join(''))
      .join('\n');
  };

  return (
    <div className="info-block">
      <h2>{info.title}</h2>
      <div className="content">{getPlainText(info.content)}</div>
      <button>操作按钮</button>
    </div>
  );
}

方式二：保留格式渲染HTML（推荐）

如果需要保留富文本的格式（段落、加粗、链接等），可使用Strapi官方工具转换为HTML后渲染：

1. 安装依赖：

npm install @strapi/helper-plugin

2. 组件中使用：

import { renderRichText } from '@strapi/helper-plugin';

export default function InfoBlock({ info }) {
  return (
    <div className="info-block">
      <h2>{info.title}</h2>
      {/* 使用dangerouslySetInnerHTML渲染转换后的HTML */}
      <div className="content" dangerouslySetInnerHTML={{ __html: renderRichText(info.content) }} />
      <button>操作按钮</button>
    </div>
  );
}

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