I'm trying to render section titles and posts using firebase and Nextjs. Shows me the following error: Cannot read properties of undefined (reading 'map'): index.js I use get Static Props for pre-render Home page :
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
};
}
Home page I get props for Components:
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 file export as firebase-- my Json file :
{
"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"
}
}
}
Where is my mistake? please guide me? It works with a one map, but I always get errors when it comes to nesting