无法读取未定义的属性（读取“地图”）NextJs嵌套地图问题答案

【问题标题】：Cannot read properties of undefined (reading 'map') NextJs Nested map problem无法读取未定义的属性（读取“地图”）NextJs嵌套地图问题
【发布时间】：2022-06-13 23:28:30
【问题描述】：

我正在尝试使用 firebase 和 Nextjs 呈现部分标题和帖子。显示以下错误：无法读取未定义的属性（读取“地图”）： index.js 我使用 get Static Props 来预渲染主页：

export default function Home(props) {
 return (
   <div>
    <HomePage items={props.allData} />
  </div>
 );
 }
 export async function getStaticProps() {
  const getallData = await getAllData();
   return {
     props: {
      allData: getallData,
     },
    revalidate:2000
   };
  }

主页我得到组件的道具：

  const HomePage = (props) => {
  const { items } = props;
 return (
 <div className="">
   <Head>
     <title>Azmonito</title>
   </Head>
   <main className="grid grid-cols-11">
     <SideBar />
     <div>
       {items.map((item) => (
         <div key={item.id}>
           <h4>{item.title}</h4>

           <div>
             {item.difficulty.map((course) => (
                 <ul key={course.id}>
                   <LanguagesItem title={course.title} />
                 </ul>
               ))}
           </div>
         </div>
       ))}
     </div>
   </main>
 </div>
    );
    };

  export default HomePage;

Json 文件导出为 firebase-- 我的 Json 文件：


 {
  "exam": {
    "de": {
     "category": "germany",
      "difficulty": {
     "a1": {
       "id": "a1-german-a",
       "title": "german a1"
     }
   },
   "id": "de",
   "title": "german"
 },
 "en": {
   "category": "english",
   "difficulty": {
     "a1": {
       "id": "a1-english-a",
       "title": "a1 exam"
     },
     "a2": {
       "id": "a2-english-a",
       "title": "a2 exam"
     }
   },
   "id": "en",
   "title": "english"
 }
  }
 }

我的错误在哪里？请指导我？它适用于一张地图，但在嵌套时我总是会出错

【问题讨论】：

.map 仅适用于数组。对象不是数组。

标签： javascript reactjs next.js