NextJS+TypeScript中JSON映射HTML报错：props.books.map不是函数

核心原因 #

map方法仅能在数组上调用，出现这个错误说明props.books不是数组——要么你的JSON文件格式不是数组结构，要么导入后没有正确获取到数组数据。

正确的静态JSON格式示例 #

你的场景需要一个对象数组，格式如下：

[
  {
    "author": "J.K. Rowling",
    "dateFinish": "2024-05-20",
    "dateStart": "2024-05-10",
    "rating": "5",
    "review": "经典奇幻作品，情节引人入胜",
    "title": "哈利·波特与魔法石"
  },
  {
    "author": "Harper Lee",
    "dateFinish": "2024-04-30",
    "dateStart": "2024-04-20",
    "rating": "4.5",
    "review": "关于种族与正义的深刻探讨",
    "title": "杀死一只知更鸟"
  }
]

注意：

• 数组用[]包裹，内部每个对象用{}定义
• 所有键名必须用双引号（不能用单引号或无引号）
• 字符串值必须用双引号
• 最后一个元素后不能加逗号（避免语法错误）

代码排查与修复 #

1. 检查JSON结构：如果你的JSON是用对象包裹数组（比如{ "books": [/*...*/] }），需要在导入时提取数组：

export const getStaticProps: GetStaticProps = async () => {
  const data = (await import("../../static/bookReviews.json")).default;
  // 提取数组部分
  const books = data.books;
  return {
    props: { books },
  };
};

2. 验证数据类型：可以在getStaticProps中添加日志，确认数据类型：

export const getStaticProps: GetStaticProps = async () => {
  const books = (await import("../../static/bookReviews.json")).default;
  console.log("Books data type:", typeof books);
  console.log("Is array?", Array.isArray(books));
  return {
    props: { books },
  };
};

如果输出Is array? false，说明JSON不是数组结构，需要调整JSON格式。

JSON行业标准参考 #

JSON的官方规范是ECMA-404，定义了JSON的核心语法规则：

• 支持的数据类型：对象、数组、字符串、数字、布尔值（true/false）、null
• 键名必须是双引号包裹的字符串
• 数组元素可以是任意合法JSON类型
• 不支持注释（部分工具允许，但不属于标准）

MDN文档中也有详细的JSON语法说明，涵盖了格式规范、常见错误排查等内容。

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