estoy trabajando en un proyecto en React.js donde enseño un par de propiedades de un objeto llamado device, este objeto consta de client, state y device. los valores los obtengo de una base de datos de google firebase pero cuando el usuario intenta consultar un documento que no existe la app se crashea con el error de que no se han podido leer las propiedades de device, sabiendo que cuando el documento no existe retorna undefined. el codigo del componente que chequea la base de datos, y enseña los resultados es el siguiente:
import { useState } from "react"
import { Button } from "./Button/Button"
import { TextField } from "./TextField/TextField"
import { doc, getDoc } from "firebase/firestore"
import { db } from "../../firebase"
export const CheckPage = () => {
const [device, setDevice] = useState({ device: 'desconocido', state: 'desconocido' })
async function checkStatus() {
const docRef = doc(db, 'repairStatus', controlNumber.value);
const docSnap = await getDoc(docRef);
if(docRef.exists){
setDevice(docSnap.data());
}else{
setDevice({device: 'Error', state: 'error'})
}
}
return(
<div className="checkBackground">
<div className="mainCheckContainer">
<div className="checkContainer1">
<div className="Form">
<TextField id='controlNumber' label='Numero de control'></TextField>
<Button onClick={checkStatus} variant='allow' label='Consultar'></Button>
</div>
</div>
<div className="checkContainer2">
<div className="checkedInfo">
<h3>Su equipo a reparar es:</h3>
<p>{device.device}</p>
<h3>Su estado actual es:</h3>
<p>{device.state}</p>
</div>
</div>
</div>
</div>
)
}