NextJS 13报错TypeError: items.map is not a function求解决方案

这是我推进项目过程中唯一无法解决的错误，有人知道该如何修复吗？🙏
我正在使用NextJS 13进行开发，出现如下错误：

components/events/EventsList.js (8:15) @ EventsList

   6 | return (
   7 |   <ul>
>  8 |     {items.map((event) => (
     |           ^
   9 |       <EventItem
  10 |         key={event.id}
  11 |         id={event.id}

完整代码片段如下：

import EventItem from "./EventItem";

function EventsList(props) {
    const { items } = props;
  
    return (
      <ul>
        {items.map((event) => (
          <EventItem
            key={event.id}
            id={event.id}
            title={event.title}
            location={event.location}
            date={event.date}
            image={event.image}
          />
        ))}
      </ul>
    );
  }

export default EventsList

修复方案 #

• 给items加默认空数组：直接在解构时兜底，避免items为undefined或null导致无法调用map：

  const { items = [] } = props;
  

• 校验items有效性再渲染：如果items是异步获取的，先判断是否存在再执行map：

  function EventsList(props) {
    const { items } = props;
  
    if (!items) return <div>加载中...</div>;
  
    return (
      <ul>
        {items.map((event) => (
          <EventItem
            key={event.id}
            id={event.id}
            title={event.title}
            location={event.location}
            date={event.date}
            image={event.image}
          />
        ))}
      </ul>
    );
  }
  

• 确认父组件传参正确：检查调用EventsList的父组件，确保传递的items是合法数组，比如API请求返回的数据是否正确解析为数组，避免传递了对象、字符串等非数组类型。

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