无法获取生成的 firebase 文档的 ID

Question

我正在尝试获取生成的 firebase 文档的 ID，并且正在使用addDoc创建一个新文档。

我在单击按钮时生成一个新文档，该按钮调用initializeCodeEditor function。

任何人都请帮我解决这个问题！

按钮代码：

import { useNavigate } from "react-router-dom"

import { useAuthContext } from "../../hooks/useAuthContext"
import { useFirestore } from "../../hooks/useFirestore"

import Button from "./Button"

const StartCodingButton = ({ document, setIsOpen }) => {
  const { user } = useAuthContext()
  const { addDocument, response } = useFirestore("solutions")
  const navigate = useNavigate()

  const initializeCodeEditor = async () => {
      await addDocument({
        ...document,
        author: user.name,
        userID: user.uid,
      })

      if (!response.error) {
        console.log(response.document) // null
        const id = response?.document?.id; // undefined
        navigate(`/solution/${id}`, { state: true })
      }
  }

  return (
    <Button
      className="font-medium"
      variant="primary"
      size="medium"
      onClick={initializeCodeEditor}
      loading={response.isPending}
    >
      Start coding online
    </Button>
  )
}

export default StartCodingButton

添加文档代码

import { useReducer } from "react"
import {
  addDoc,
  collection,
  doc,
  Timestamp,
} from "firebase/firestore"

import { db } from "../firebase/config"
import { firestoreReducer } from "../reducers/firestoreReducer"

const initialState = {
  document: null,
  isPending: false,
  error: null,
  success: null,
}

export const useFirestore = (c) => {
  const [response, dispatch] = useReducer(firestoreReducer, initialState)

  // add a document
  const addDocument = async (doc) => {
    dispatch({ type: "IS_PENDING" })

    try {
      const createdAt = Timestamp.now()
      const addedDocument = await addDoc(collection(db, c), {
        ...doc,
        createdAt,
      })
      dispatch({ type: "ADDED_DOCUMENT", payload: addedDocument })
    } catch (error) {
      dispatch({ type: "ERROR", payload: error.message })
    }
  }

  return {
    addDocument,
    response,
  }
}

firestoreReducer

export const firestoreReducer = (state, action) => {
  switch (action.type) {
    case "IS_PENDING":
      return { isPending: true, document: null, success: false, error: null }
    case "ADDED_DOCUMENT":
      return { isPending: false, document: action.payload, success: true, error: null }
  }
  throw Error("Unknown action: " + action.type)
}

Answer 1

我重新创建了这个问题，发现这是因为useFirestore挂钩中的response object 直到下一个渲染周期才会更新。

为了获得更新后的响应 object，您可以使用useEffect钩子在响应 object 发生变化时触发对组件的更新。

所以我建议你调用initializeCodeEditor并让你的应用程序等待响应 object 更改我在这里使用 useEffect

const initializeCodeEditor = async () => {
      await addDocument({
        author: user.name,
        userID: user.uid,
      })
//skip following if block it's just for understanding
if (!response.error) {
        console.log(response.document) // will obviously be null here as at first it is set null
        const id = response?.document?.id; // will obviously be undefined
        navigate(`/solution/${id}`, { state: true })
      }
  }

  useEffect(() => {
    if (!response.error) {
      setId(response?.document?.id);
      console.log("From App.js useEffect: " + response?.document?.id); // getting the document id here too 
    }
  }, [response])

//and in firestoreReducer
case "ADDED_DOCUMENT":{
        console.log("from Reducer: " + action.payload.id); //getting the document id here
        return { isPending: false, document: action.payload, success: true, error: null }
      }

或者你也可以在不引入 useEffect 的情况下使用callback ：

const initializeCodeEditor = async () => {
  await addDocument({
    author: user.name,
    userID: user.uid,
  }, (response) => {
    console.log("From App: " + response?.document?.id); //Will run as callback
    if (!response.error) {
      setId(response?.document?.id);
    }
  })
}

这样，回调 function 将在 addDocument function 完成后调用，响应 object 将具有更新的文档 ID。