报错TypeError: blog.map is not a function的原因及解决咨询

1. 组件参数接收错误 #

React函数组件的第一个参数是props对象，而非直接传入的单个属性值。你在List组件中写function List(blog)，这里的blog实际是包含所有传入props的对象（结构类似{ blog: [...] }），直接对这个对象调用.map方法必然报错——因为对象本身没有map方法。

2. 潜在的数据类型风险 #

如果client.get返回的data.contents不是数组（比如返回null、undefined或单个对象），即使参数接收正确，调用.map也会触发同样的类型错误。

步骤1：正确接收组件props #

有两种方式修正参数接收问题：

方式一：解构props直接获取blog数组

import React from 'react'
import Link from "next/link";
import styles from "@/styles/Home.module.css"; // 补充导入样式文件

function List({ blog }) { // 解构出传入的blog属性
    return (
        <div id="blog-list">
        {/* 使用可选链操作符?.，避免blog为undefined时报错 */}
        {blog?.map((item) => (  
            <div className={styles.div}>
            <ul className={styles.ul}>
                <li className={styles.li} key={item.id}>
                <Link href={`/blog/${item.id}`}>{item.title}</Link>
                </li>
            </ul>
            </div>
        ))}
        </div>
    )
}

export default List;

方式二：从props对象中提取blog

import React from 'react'
import Link from "next/link";
import styles from "@/styles/Home.module.css";

function List(props) {
    const { blog } = props; // 从props中提取blog数组
    return (
        <div id="blog-list">
        {blog?.map((item) => (
            <div className={styles.div}>
            <ul className={styles.ul}>
                <li className={styles.li} key={item.id}>
                <Link href={`/blog/${item.id}`}>{item.title}</Link>
                </li>
            </ul>
            </div>
        ))}
        </div>
    )
}

export default List;

步骤2：确保数据为数组类型 #

在getStaticProps中添加判断，保证传递给组件的blog始终是数组：

export const getStaticProps = async () => {
  const data = await client.get({
    endpoint: 'blogs',
  })
  // 若data.contents不是数组，默认返回空数组
  const blog = Array.isArray(data.contents) ? data.contents : []
  return {
    props: {
      blog,
    },
    revalidate: 1
  }
}

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