当我在我的sveltekit项目中使用Firebase时,我如何修复错误窗口未定义,因为其他原因我无法将其挂载,并试图绕过它?你有什么 idea ,或者有没有办法让我把初始化放在装载上,同时仍然把数据发送到装载之外

 <script>
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "firebase/app";
      import { getAnalytics } from "firebase/analytics";
      import { getFirestore } from "firebase/firestore";
      import { onMount } from 'svelte';
      import { collection, addDoc } from "firebase/firestore"; 
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      let song = 'song';
        
      const firebaseConfig = {
     
      };
    
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      const db = getFirestore(app);
      async function sendSong(){
      try {
        const docRef = await addDoc(collection(db, "songs"), {
          title: {song},
          atist: "test"
        });
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
      }
      </script>
      <input bind:value={song}>
   
      
      <style>
      </style>

推荐答案

结果这对我很管用

<script>
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "firebase/app";
      import { getAnalytics } from "firebase/analytics";
      import { getFirestore } from "firebase/firestore";
      import { onMount } from 'svelte';
      import { collection, addDoc } from "firebase/firestore"; 
      import { Notyf } from 'notyf';
        import 'notyf/notyf.min.css'; // for React, Vue and Svelte
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      let song ;
      let artist ;
      let db;
      onMount(() => {
      const firebaseConfig = {
        //redacted
      };
    
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      db = getFirestore(app);
    
    
    
    });
    
    async function sendSong(){
      try {
        const docRef = await addDoc(collection(db, "songs"), {
          song: {song},
          atist: {artist}
        });
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
      }
      </script>
    <div class="main">
      <h1 class="text-primary">Submit a song</h1>
      <input class="margin" placeholder="song" bind:value={song}>
      <input class="margin" placeholder="artist" bind:value={artist}>
      <button on:click={sendSong} id="send-button" type="submit" class="margin sub button primary is-full-width "
                >Submit Form</button>
        </div>  
      <style>
        .margin{
          margin-top: .5em;
        }
        .main{
          margin: 4em;
        }
      </style>

Javascript相关问答推荐

Mongoose post hook在使用await保存时不返回Postman响应

在我的html表单中的用户输入没有被传送到我的google表单中

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

在JS中拖放:检测文件

本地库中的chartjs-4.4.2和chartjs-plugin-注解

从页面到应用程序(NextJS):REST.STATUS不是一个函数

如何将zoom 变换应用到我的d3力有向图?

Reaction组件在本应被设置隐藏时仍显示

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

搜索功能不是在分页的每一页上进行搜索

Next.js中的服务器端组件列表筛选

按特定顺序将4个数组组合在一起,按ID分组

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

ReactJS Sweep Line:优化SciChartJS性能,重用wasmContext进行多图表渲染

动画可以在Chrome上运行,但不能在Safari上运行

更改彼此独立的两个输入字段的类型

MarkLogic JavaScript如何获取元素 node 的空间

素材界面如何让自动完成弹出框不受菜单限制

在Next.js v12.3.1和Reaction v18.2.0";中缩小了REACT错误#418和#423

基于单击按钮更改椭圆的填充/取消填充状态,同时跟踪用户是否 Select 另一种 colored颜色