Estoy tratando de representar títulos de sección y publicaciones usando firebase y Nextjs. Me muestra el siguiente error: No se pueden leer las propiedades de undefined (leyendo 'mapa'): index.js Utilizo get Static Props para la página de inicio previa al renderizado:
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 }; }Página de inicio Recibo accesorios para Componentes:
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;Exportación de archivo Json como base de fuego: mi archivo 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" } } }¿Dónde está mi error? ¿por favor guíame? Funciona con un solo mapa, pero siempre recibo errores cuando se trata de anidar.