Estoy creando una tabla con los datos guardado en mi coleccion de firebase, cuando intento pintarlos en cada parte de la tabla me genera el siguiente error:
Uncaught TypeError: Cannot read properties of null (reading 'filas')
Este es mi codigo, no se que estoy haciendo mal:
import React, { useState, useEffect } from "react";
import { getLastDocumentOfTheCollection } from "../Firebase/firebase.config";
const GeneratedReport = () => {
const [data, setData] = useState(null);
useEffect(() => {
getLastDocumentOfTheCollection(setData);
}, []);
return (
<div className="container-ReportGenerated">
<div className="table-wrapper">
<table className="containerTable">
<thead>
<tr>
<th>{data.filas.fila1.campo}</th>
<th>{data.filas.fila2.campo}</th>
{data?.columnas?.columna1?.data.map((columns, i) =>
columns === "" ? <th key={i}></th> : <th key={i}>{columns}</th>
)}
</tr>
<tr>
{data?.filas?.fila1?.data.map((rows, i) => (
<tr>{rows}</tr>
))}
</tr>
</thead>
</table>
</div>
</div>
);
};
export default GeneratedReport;