数据未写入 Firestore 数据库答案

【问题标题】：data not writing to firestore database数据未写入 Firestore 数据库
【发布时间】：2021-07-19 03:21:30
【问题描述】：

下面的代码是nextjs中的一个组件，目的是在用户单击按钮后将数据写入firestore数据库。

Firebase 没有将我的数据写入 Firestore 数据库，但是我的回调中的警报（即在假定的数据转储之后）有效。我尝试检查我的 process.env 文件以查看是否是问题所在，但这不是问题。

这是我的写文件

import firebase from 'firebase/app'
import 'firebase/firestore'

const WriteToCloudFirestore = () => {

    const sendData = () => {
        try {
            //send data
            firebase
                .firestore()
                .collection('myCollection')
                .doc('my_document')
                .set({
                    string_data: 'string',
                    more_data: 123
                })
                .then(alert('data sent to firestore'))
        }
        catch(e) {
            console.log(e)
            alert(e)

        }
    }

    return (
        <>
            <button onClick={sendData}>send data to cloud firestore</button>
        </>
    )
}

export default WriteToCloudFirestore

如果您需要更多文件，我可以添加它们，但据我所知，firebase 已在我的应用程序中初始化。我查看了这个论坛上的其他一些问题，并且能够找到一个与返回 null 的数据有关的非常相似的问题 - 但我不明白这是我的问题，因为我将数据放在我的 .set 部分 Firestore 代码。

【问题讨论】：

.then(alert('data sent to firestore')) 这会立即发出警报，然后将警报的返回值传递给.then。
我已经完全删除了 .then(alert) 并且数据仍然没有写入 firestore
只是指出您收到看似成功的警报的原因。尝试将.catch 添加到 Promise 链中，然后查看其中记录的内容。您的 try/catch 块只能捕获同步错误，不能捕获异步错误。
例如：试试，.set({ /* ... */ }).catch(err => console.log(err))
是的，感谢您提供的这些信息，因为我仍在发展我对异步代码的理解。所以 - 非常类似于这个问题stackoverflow.com/questions/54153085/… 我根本没有收到错误。

标签： javascript database firebase google-cloud-firestore next.js

【解决方案1】：

Javascipt 警报是同步的，这意味着它会阻止任何代码执行，除非警报被解除。在您关闭警报的那一刻，您的数据将在 Firestore 中弹出。因此，您应该先处理 Firestore set 方法返回的 promise，然后再显示警报。

firebase
      .firestore()
      .collection("myCollection")
      .doc("my_document")
      .set({
        string_data: "string",
        more_data: 123,
      })
      .then(() => {
        console.log("Data addded")
        alert("data sent to firestore")
      })
      .catch((e) => console.log(e));

您也可以使用async-await 语法：

const sendData = async () => {
    console.log("Sending Data");
    try {
      await firestore.collection("myCollection").doc("my_document").set({
        string_data: "string",
        more_data: 123,
      })
      alert("Data added to Firestore")
    } catch (e) {
      console.log(e)
    }
}

您可以在blog 中阅读有关该行为的更多信息。

【讨论】：