Estoy usando Next.js y Firebase.

Quiero permitir que los usuarios se registren en Google, pero necesito verificar en el nivel de la aplicación si el estado de los usuarios es "incomplete" o "active" .

Aquí está mi efecto de uso. Escucho userData aquí y si el estado es "incomplete" , redirijo al usuario al lugar donde puedo finalizar su proceso de registro (por ejemplo, solicitar el nombre de usuario).

 useEffect(() => { if (currentUser && currentUser !== "unauthenticated") { const docRef = doc(db, "users", currentUser.uid); return onSnapshot(docRef, async (doc) => { let data = doc.data() as UserData; if (!data) { return; } if (data?.status === "incomplete") { router.push("/complete-user-data"); return; } setData(doc.data() as UserData); }); } }, [currentUser, router, setData]);

Sin embargo, esto funcionaría ya que useEffect se vuelve a representar constantemente debido a router.push("/complete-user-data"); , estoy en un bucle infinito.

¿Cuál es la mejor manera de crear un oyente de nivel superior que básicamente bloqueará al usuario en función de una determinada condición y lo empujará a una ruta determinada?

¿Hay alguna manera de enviar solo a una ruta si el usuario no está actualmente en esa ruta (en mi caso, si no están en /complete-user-data ?)