創建用戶后寫入Firestore時獲取“檔案不是函式”

創建用戶時，我需要將用戶名保存在我的 Firestore 資料庫中。我將 Firebase (v9) 與 React 一起使用。代碼如下。

已創建用戶，但未在 Firestore 資料庫中添加用戶。

setDoc里面的使用方法是什么createUserWithEmailAndPassword

有人可以幫我寫代碼嗎？

import Box from "@mui/material/Box";
import OutlinedInput from "@mui/material/OutlinedInput";
import Button from "@mui/material/Button";
import Alert from "@mui/material/Alert";
import { Link, Outlet } from "react-router-dom";

import {
    collection,
    query,
    onSnapshot,
    setDoc,
    serverTimestamp,
    doc,
} from "firebase/firestore";

import { createUserWithEmailAndPassword } from "firebase/auth";

import { db, auth } from "../../../firebase";

import IGLogo from "../../../images/instagram-logo.png";

import "./SignUpForm.scss";

function SignUpForm() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [username, setUsername] = useState("");
    const [successalert, setSuccessAlert] = useState(undefined);
    const [failalert, setFailAlert] = useState(undefined);
    //const [user, setUser] = useState(undefined);

    useEffect(() => {
        const timeId = setTimeout(() => {
            // After 3 seconds set the show value to false
            setSuccessAlert(undefined);
        }, 3000);

        return () => {
            clearTimeout(timeId);
        };
    });

    useEffect(() => {
        const timeId = setTimeout(() => {
            // After 3 seconds set the show value to false
            setFailAlert(undefined);
        }, 3000);

        return () => {
            clearTimeout(timeId);
        };
    });

    useEffect(() => {
        const timeId = setTimeout(() => {
            // After 3 seconds set the show value to false
            setFailAlert(undefined);
        }, 3000);

        return () => {
            clearTimeout(timeId);
        };
    });

    const instagramSignUp = (event) => {
        event.preventDefault();

        const q = query(collection(db, "users"));
        onSnapshot(q, (querySnapshot) => {
            querySnapshot.docs.forEach((doc) => {
                if (doc.id === username) {
                    setFailAlert({ type: "userexist" });
                } else {
                    createUserWithEmailAndPassword(auth, email, password)
                        .then((userCreated) => {
                            setDoc(doc(db, "users", username), {
                                timestamp: serverTimestamp(),
                            })
                                .then(() => {
                                    setSuccessAlert({ type: "success" });
                                    console.log("user created in collection");
                                })
                                .catch((error) => {
                                    console.log(error.message);
                                });
                        })
                        .catch((error) => {
                            console.log(
                                "createUserWithEmailAndPassword = "  
                                    error.message
                            );
                        });
                }
            });
        });
    };

    return (
        <>
            <div className="component__signupalerts">
                {successalert?.type === "success" && (
                    <Alert variant="filled" severity="success">
                        Account Created Successfully. Please check your Email
                        for Verification.
                    </Alert>
                )}

                {failalert?.type === "userexist" && (
                    <Alert variant="filled" severity="error">
                        Username already taken
                    </Alert>
                )}
            </div>
            <div className="component__signupform">
                <img src={IGLogo} alt="" />
                <Box component="form" className="component__signupform--box">
                    <OutlinedInput
                        className="component__loginform--input"
                        type="text"
                        placeholder="Username"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                    />
                    <OutlinedInput
                        className="component__signupform--input"
                        type="email"
                        placeholder="Email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                    <OutlinedInput
                        className="component__signupform--input"
                        type="password"
                        placeholder="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                    <Button
                        className="component__signupform--button"
                        type="submit"
                        variant="contained"
                        onClick={instagramSignUp}
                    >
                        Sign Up
                    </Button>
                    <Link to="/" className="component__signupform--button">
                        Sign In
                    </Link>
                </Box>
            </div>
            <Outlet />
        </>
    );
}

export default SignUpForm;

Console.log “檔案不是函式”

uj5u.com熱心網友回復：

問題是doc您的代碼中有兩個定義：

1. 首先你import { ...., doc, ... } from "firebase/firestore";。
2. 然后你也定義它在querySnapshot.docs.forEach((doc) => {.

第二doc行中的隱藏了您匯入的那個。

最簡單的解決方法是命名其他變數forEach：

onSnapshot(q, (querySnapshot) => {
    querySnapshot.docs.forEach((docSnapshot) => {
        if (docSnapshot.id === username) {
            ...

標籤：反应 火力基地 谷歌云火库

上一篇：如何訪問Firebase中唯一鍵的子項？

下一篇：在reactfirebase中使用UpdateProfile時未捕獲的Promise