我无法使用 firebase firestore 将数据存储到数据库

Question

I've been spending several hours trying to figure out why I can't store the first name and last name of a user when they sign up to create an account.

The code is running and the user are able to create an account. The email is successfully authenticated to firebase, however the collection is not even created in firebase. Does anybody know why?

Signup.js

import React, { useRef, useState } from "react"
import { Form, Button, Card, Alert, Container } from "react-bootstrap"
import { Link, useNavigate } from "react-router-dom"
import { database } from "../firebase"
import { useAuth } from "../contexts/AuthContext"

export default function Signup() {

  const [firstName, setfirstName] = useState("")
  const [lastName, setlastName] = useState("")
  const { currentUser } = useAuth()
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmRef = useRef();
  const { signup } = useAuth();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  async function handleSubmit(e) {
    e.preventDefault()

    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
      return setError("The password does not match!");
    }

    try {
      setError("");
      setLoading(true);
      await signup(emailRef.current.value, passwordRef.current.value);
      navigate("/dashboard");
    } catch {
      setError("Failed to create an account");
    }

//this is where its suppose to handle storing data to firebase with the collection from firebase.js that I had created
    database.student.add({
      firstName: firstName,
      lastName: lastName,
      userId: currentUser.uid,
      createdAt: database.getCurrentTimestamp(),
    })

    setfirstName("")


  }

  return (
    <Container
      className="d-flex align-items-center justify-content-center"
      style={{ minHeight: "100vh" }}
    >
      <div className="w-100" style={{ maxWidth: "400px" }}>
        <Card>
          <Card.Body>
            <h2 className="text-center mb-4">Sign Up Here</h2>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form onSubmit={handleSubmit}>
              <Form.Group>
                <Form.Label>First Name</Form.Label>
                <Form.Control
                  type="text"
                  required
                  value={firstName}
                  onChange={e => setfirstName(e.target.value)}
                />
              </Form.Group>

              <Form.Group>
                <Form.Label>Last Name</Form.Label>
                <Form.Control
                  type=""
                  required
                  value={lastName}
                  onChange={e => setlastName(e.target.value)}
                />
              </Form.Group>

              <Form.Group id="email">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" ref={emailRef} required />
              </Form.Group>

              <Form.Group id="password">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" ref={passwordRef} required />
              </Form.Group>

              <Form.Group id="pass-confirm">
                <Form.Label>Password Confirmation</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordConfirmRef}
                  required
                />
              </Form.Group>

              <Button disabled={loading} className="w-100" type="submit">
                Sign up
              </Button>
            </Form>
          </Card.Body>
        </Card>
        <div className="w-100 text-center mt-2">
          Do you have an account? <Link to="/login">Login Here</Link>
        </div>
      </div>
    </Container>
  )
}

firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
import 'firebase/compat/functions';
import "firebase//compat/storage";

const app = firebase.initializeApp( {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
})

const firestore = app.firestore()
export const database = {
    student: firestore.collection("student"),
    teacher: firestore.collection("teacher"),
    getCurrentTimestamp: firebase.firestore.FieldValue.serverTimestamp,
}

export const auth = app.auth()
export const functions = app.functions()
export const storage = app.storage()

export default app;

Answer 1

You seem to be navigating away from the component (by calling navigate("/dashboard") ) before the data is saved to the database (by calling database.student.add(...) ).

To prevent this, move the code that adds the data before the code that navigates:

try {
  setError("");
  setLoading(true);
  await signup(emailRef.current.value, passwordRef.current.value);

  // 👇
  await database.student.add({
    firstName: firstName,
    lastName: lastName,
    userId: currentUser.uid,
    createdAt: database.getCurrentTimestamp(),
  })

  navigate("/dashboard");
} catch {
  setError("Failed to create an account");
}

I added an await to the database call too, so that the navigation only happens after the data was added to the database. This is not strictly needed if you have a single-page application, but it may help seeing the flow of things in your code.