Firebase 身份验证错误：元素类型无效的预期字符串

问题描述

我目前正在尝试将 firebase 身份验证连接到一个已经正常运行的登录组件。我收到的错误让我相信我导出的东西不正确？但是经过一些摆弄，我没有成功。我宁愿感谢某种解释，因为我正在处理的内容似乎非常基本。

此外，我确实对 ReactJS/hooks 以及代码的执行有基本的了解。我只是想 - 为方便起见 - 我会尝试从指南中实现身份验证代码（更少的击键，显然还有更多的问题）。

任何其他批评或指导将不胜感激。我仍在对 Firebase 有所了解，并正在努力打入这个行业 :)

错误信息：

文件结构：

我的 Login.js 文件使用 Chakra UI，如下所示：

import { Flex,Text,Input,FormControl,heading,Center,Button,Formlabel 
    } from "@chakra-ui/react"
import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

import useAuth from "../../Firebase/AuthContext";

export default function Home() {

  const [email,setEmail] = useState("");
  const [password,setPassword] = useState("");
  const [error,setError] = useState(null);
  const router = useRouter();
  const { signInWithEmailAndPassword } = useAuth();

  const onSubmit = event => {
    setError(null)
    signInWithEmailAndPassword(email,password)
    .then(authUser => {
      router.push('../profile');
    })
    .catch(error => {
      setError(error.message)
    });
    event.preventDefault();
  };



return (
<>


  <Flex direction='column' w={[300,400,600]} justify='center' align='center'>
    <heading className='heading' pt='15px' pb='15px' align='center'>Log In</heading>
    <FormControl id='email' align='center' onSubmit={onSubmit}>

      { error && <Alert color="danger">{error}</Alert>}

      <Formlabel>Email Address</Formlabel>
        <Input
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
            name="email"
            id="loginEmail"
            placeholder="Email" />
      
      <Formlabel>Password</Formlabel>
      <Input
            type="password"
            name="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            id="loginPassword"
            placeholder="Password" />

      <Button variant='outline' type='submit' mt='25' w={[300,150,100]}>Submit</Button>
      <Text mt='15px'>Forgot Password? CLICK HERE</Text>

    </FormControl>
  </Flex>
</>
)
}

Auth.js

import { useState,useEffect } from 'react'
import Firebase from './firebase';
import { createContext,useContext,Context } from 'react'
import useFirebaseAuth from '../lib/useFirebaseAuth';

const formatAuthUser = (user) => ({
  uid: user.uid,email: user.email
});

export default function useFirebaseAuth() {
  const [authUser,setAuthUser] = useState(null);
  const [loading,setLoading] = useState(true);

  const authStateChanged = async (authState) => {
    if (!authState) {
      setAuthUser(null)
      setLoading(false)
      return;
    }

    setLoading(true)
    var formattedUser = formatAuthUser(authState);
    setAuthUser(formattedUser);    
    setLoading(false);
  };

// listen for Firebase state change
  useEffect(() => {
    const unsubscribe = Firebase.auth().onAuthStateChanged(authStateChanged);
    return () => unsubscribe();
  },[]);

  return {
    authUser,loading
  };
}

AuthContext.js

import { createContext,Context } from 'react'
import useFirebaseAuth from './Auth';

const authUserContext = createContext({
  authUser: null,loading: true
});

export function AuthUserProvider({ children }) {
  const auth = useFirebaseAuth();
  return <authUserContext.Provider value={auth}>{children}</authUserContext.Provider>;
}
// custom hook to use the authUserContext and access authUser and loading
export const useAuth = () => useContext(authUserContext);

页面/组件/Login.js

import { Flex,100]}>Submit</Button>
      <Text mt='15px'>Forgot Password? <Link href="/profile">Create one</Link></Text>

    </FormControl>
  </Flex>
</>
)
}

谢谢你，祝你有美好的一天！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）