Estoy creando una autenticación para cada ruta y quería tener disponible el valor del usuario en cada ruta, por eso usé context.

Hice un componente de diseño que importo en la aplicación justo después del contexto como este:

 function MyApp({ Component, pageProps }) { const router = useRouter() useEffect(() => { if (router.pathname == '/' || router.pathname == '/_error') { router.push('/login') } }, []) return ( <AuthProvider> <Layout> <Component {...pageProps} /> </Layout> </AuthProvider> ) } export default MyApp

Aquí está mi componente de diseño:

 const Layout = ({ children }) => { const {loggedInUser} = useContext(AuthContext) const router = useRouter() useEffect(() => { if (router.pathname == '/' || router.pathname == '/_error') { ... } }, []) return <div>{children}</div> } export default Layout

Aquí está mi contexto:

 export const AuthContext = React.createContext() function AuthProvider(props) { const [loggedInUser, setUserLoggedIn] = useState() useEffect(() => { onAuthStateChanged(auth, (currentUser) => { if (!currentUser) { setUserLoggedIn(currentUser) } else { } }) }, []) return <AuthContext.Provider value={{ loggedInUser, setUserLoggedIn }}>{props.children}</AuthContext.Provider> } export default AuthProvider

Cuando intento ingresar a una ruta, aparece este error TypeError: Cannot destructure property 'loggedInUser' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined.

¡Espero que puedas ayudarme!