Next.js读取JSON文件报错：Property 'map'不存在于string类型

错误根源 #

你将apiData的类型定义为string，但map是数组的专属方法，字符串类型无法调用该方法。同时你可能未在数据获取阶段正确解析JSON，导致传递给组件的是字符串而非数组结构。

具体修改步骤 #

1. 修正类型定义
   根据你的JSON数据结构（嵌套数组，子元素包含title字段），将PageProps的类型调整为对应数组结构：

type PageProps = {
  apiData: Array<Array<{ title: string }>>;
};

2. 补充并完善数据获取逻辑
   添加GetStaticProps函数，确保获取到的JSON数据被正确解析为数组，而非字符串：

export const getStaticProps: GetStaticProps<PageProps> = async () => {
  // 替换为你的JSON数据获取地址或本地文件读取逻辑
  const res = await fetch("你的JSON数据源地址");
  const apiData = await res.json();

  return {
    props: {
      apiData,
    },
  };
};

3. 修复组件内的遍历逻辑
   当前嵌套map存在两个问题：一是错误使用数组对象访问title（应使用子元素），二是用index作为key易引发渲染异常。修正后代码如下：

const Home: NextPage<PageProps> = ({ apiData }) => {
  return (
    <div>
      {apiData.map((group, groupIndex) => (
        <div key={`group-${groupIndex}`}>
          {group.map((item) => (
            <div key={randomUUID()}>
              <p>{item.title}</p>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

完整修正后的代码 #

import styled from "styled-components";
import type { GetStaticProps, NextPage } from "next";
import { randomUUID } from "crypto";

type PageProps = {
  apiData: Array<Array<{ title: string }>>;
};

const Home: NextPage<PageProps> = ({ apiData }) => {
  return (
    <div>
      {apiData.map((group, groupIndex) => (
        <div key={`group-${groupIndex}`}>
          {group.map((item) => (
            <div key={randomUUID()}>
              <p>{item.title}</p>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export const getStaticProps: GetStaticProps<PageProps> = async () => {
  const res = await fetch("你的JSON数据源地址");
  const apiData = await res.json();

  return {
    props: {
      apiData,
    },
  };
};

export default Home;

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