我正在尝试将表单数据保存到云 Firestore

Question

我正在尝试将表单数据保存到云 Firestore。使用以下链接 - https://firebase.google.com/docs/firestore/manage-data/add-data

我已经设置了 Firebase，但在按照文档操作时不断出现错误。

const profileForm = document.querySelector('#form');
const fName = document.querySelector('#fname');
const btn = document.querySelector('#submit');

btn.addEventListener('click', (e) => {
  e.preventDefault();

  /** Saving the data to the database **/            
   db.collection('profileForm').doc('contactProfile').set( {
      fName: fname.value
   }).then(() => {
       profileForm.reset();
    }).catch(err => {
       console.log(err);
    });
});

<section class="container">
  <h1>Cloud Cafe</h1>
  <div class="content">
    <form id="profileForm">
      <input type="text" name="fName" id="fName" placeholder="Cafe Name">
      <button type="submit" id="submit">Submit</button>
    </form>
  </div>
</section>

即使在我的文件中我调用了以下函数，我仍然收到以下错误

    import {getFirestore, doc, setDoc, collection, addDoc} from "firebase/firestore";
    const db = getFirestore(app);

数据未保存到 Firestore

Answer 1

鉴于您的导入，您正在尝试使用新的 v9 语法。在该语法中，大多数功能都可用作顶级函数，而不是 Firestore 对象上的方法。

因此，要从集合中获取文档，您可以：

setDoc(doc(db, 'profileForm', 'contactProfile'), {
   fName: fname.value
})...

另请参阅 writing data to a document 上的 Firebase 文档。