Estoy accediendo a los datos recuperados usando una API y los estoy mostrando así.
<Grid ><Typography variant="body1">Fiscal Year </Typography></Grid> <TableContainer style={{width:600,height:170}}> {stats?<Table sx={{alignItems: "center", display:""}} > {stats['Financial Highlights']['Fiscal Year']?<TableBody> <TableRow hover> <TableCell align="left"> Fiscal Year Ends</TableCell> <TableCell align="right"> {stats['Financial Highlights']['Fiscal Year']['Fiscal Year Ends']===null?"N/A":stats['Financial Highlights']['Fiscal Year']['Fiscal Year Ends']}</TableCell> </TableRow> <TableRow hover> <TableCell align="left"> Most Recent Quarter (mrq)</TableCell> <TableCell align="right">{stats['Financial Highlights']['Fiscal Year']['Most Recent Quarter (mrq)']===null?"N/A":stats['Financial Highlights']['Fiscal Year']['Most Recent Quarter (mrq)']}</TableCell> </TableRow> </TableBody>:"Loading"} </Table> :<div>Loading...</div>} </TableContainer> Pero sigo recibiendo "Error de tipo no capturado: no se pueden leer las propiedades de undefined (leyendo 'Año fiscal')" a pesar de que existen datos adecuados. Al hacer console.log puedo ver esto. 
Cualquier ayuda es apreciada.
Podría estar equivocado, pero creo que para cuando el compilador ingrese stats['Financial Highlights']['Fiscal Year'] , su API aún está ocupada obteniendo la respuesta. Te sugiero que agregues un operador anulable como este
stats?.['Financial Highlights']?.['Fiscal Year']
Pasará esta verificación y generará el resultado exacto una vez que la llamada HTTP obtenga algunos datos para mostrar.