¿Cómo puedo poner los datos de firestore en mi html?

Estoy haciendo un proyecto de aplicación de lista de tareas pendientes y esta es mi función para hacer tareas:

 const Task = async (name, desc, dueDate) => { return await setDoc(doc(db, "projects", name), { name, id: crypto.randomUUID(), desc, dueDate, completed: false }) }

el problema que tengo es que, según tengo entendido, no puede usar promesas en los componentes y si quiero obtener datos de la base de datos, usa promesas, entonces, ¿cómo voy a hacerlo?

Intenté hacer esto:

 function App() { const taskRef = doc(db, "projects", "first task") const taskSnap = getDoc(taskRef) return ( <div> {taskSnap.data()} </div> ) }

pero taskSnap es una promesa pendiente, y no puedo usar async/await en el componente de la aplicación