Javascript Vue.js无法读取属性'；收集'；未定义的

我正在使用Vue.js和firestore为我的项目创建一个登录页，我试图创建一个注册表单，为我的网站创建一个新帐户

我在我的firebase项目中创建了一个名为“users”的集合，其中存储了注册完成时的用户信息。但是当我调用函数时，出现了错误：

无法读取未定义的属性“集合”

我能做什么？我将在此处共享我的代码：

注册.vue

import { Auth, db, usersCollection } from '@/firebase/auth.js'
import * as fb from 'firebase'
import {App} from '@/firebase/app.js'

async addEmail(email,password) {
      var noticeMessage = "async-firestore.js

import firebase from 'firebase/app'
import { isNil } from 'lodash'

let asyncFirestore = null

// Lazy load firestore with async import is important for performance

export default () => {
  if (isNil(asyncFirestore)) {
    asyncFirestore = import(/* webpackChunkName: "chunk-firestore" */ 'firebase/firestore').then(
      () => {
        firebase.firestore().settings({})
        firebase.firestore().enablePersistence({ synchronizeTabs: true })
        return firebase.firestore()
      }
    )
  }
  return asyncFirestore
}

从'@/firebase/Auth.js'导入{Auth，db，userscolection}
从“firebase”导入*作为fb
从'@/firebase/App.js'导入{App}
异步电子邮件（电子邮件、密码）{
var noticeMessage=“异步firestore.js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...,
}

firebase.initializeApp(config)

import GenericDB from './generic-db'

export default class UsersDB extends GenericDB {
  constructor() {
    super('users')
  }
}

...
// firebase setup
import './firebase/init'
...


从“firebase/app”导入firebase
从“lodash”导入{isNil}
让asyncFirestore=null
//具有异步导入的延迟加载firestore对性能非常重要
导出默认值（）=>{
if（isNil（异步存储））{
asyncFirestore=import（/*webpackChunkName:“chunk firestore”*/'firebase/firestore'）。然后(
() => {
firebase.firestore（）.settings（{}）
firebase.firestore（）.enablePersistence（{synchronizeTabs:true}）
返回firebase.firestore（）
}
)
}
返回FireStore
}

通用数据库js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...,
}

firebase.initializeApp(config)

import GenericDB from './generic-db'

export default class UsersDB extends GenericDB {
  constructor() {
    super('users')
  }
}

...
// firebase setup
import './firebase/init'
...


从'lodash'导入{isNil，key，cloneDeep}
从“firebase/app”导入firebase
从“./async firestore”导入firestore
导出默认类GenericDB{
构造函数（collectionPath）{
this.collectionPath=collectionPath
}
/**
*在集合中创建文档
*@param数据
*@param-id
*/
异步创建（数据，id=null）{
const collectionRef=（wait firestore（））.collection（this.collectionPath）
const serverTimestamp=firebase.firestore.FieldValue.serverTimestamp（）
const dataToCreate={
…数据，
createTimestamp:serverTimestamp，
updateTimestamp:serverTimestamp
}
const createPromise=isNil（id）
？//使用生成的id创建文档
collectionRef.add（dataToCreate）.then（doc=>doc.id）
：//使用自定义id创建文档
集合参考
.doc（id）
.set（dataToCreate）
.然后（（）=>id）
const docId=wait createPromise
返回{
id:docId，
…数据，
createTimestamp:新日期（），
updateTimestamp:新日期（）
}
}
/**
*阅读集合中的文档
*@param-id
*/
异步读取（id）{
const result=await（await firestore（））
.collection（此.collectionPath）
.doc（id）
.get（）
const data=result.exists？result.data（）：null
if（isNil（data））返回null
此.convertObjectTimestampPropertiesToDate（数据）
返回{id，…data}
}
/**
*读取集合中的所有文档，并遵循以下约束条件
*@param约束
*/
异步readAll（约束=null）{
const collectionRef=（wait firestore（））.collection（this.collectionPath）
let query=collectionRef
如果（约束）{
约束。forEach（约束=>{
query=query.where（…约束）
})
}
const formatResult=result=>
result.docs.map（ref=>
this.convertObjectTimeStampertPropertiesToDate({
id:ref.id，
…参考数据（）
})
)
返回query.get（）.then（formatResult）
}
/**
*更新集合中的文档
*@param数据
*/
异步更新（数据）{
常量{id}=数据
const clonedData=cloneDeep（数据）
删除clonedData.id
等待（等待firestore（））
.collection（此.collectionPath）
.doc（id）
.更新({
…克隆数据，
updateTimestamp:firebase.firestore.FieldValue.serverTimestamp（）
})
返回id
}
/**
*删除集合中的文档
*@param-id
*/
异步删除（id）{
返回（等待firestore（））
.collection（此.collectionPath）
.doc（id）
1.删除（）
}
/**
*将所有对象时间戳属性转换为日期
*@param obj
*/
convertObjectTimestampPropertiesToDate（obj）{
常量newObj={}
钥匙（obj）
.filter（prop=>obj[prop]对象实例）
.forEach（prop=>{
if（对象[prop]instanceof firebase.firestore.Timestamp）{
newObj[prop]=obj[prop].toDate（）
}否则{
this.convertObjectTimestampPropertiesToDate（obj[prop]）
}
})
返回{
…obj，
…纽奥布
}
}
}

init.js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...,
}

firebase.initializeApp(config)

import GenericDB from './generic-db'

export default class UsersDB extends GenericDB {
  constructor() {
    super('users')
  }
}

...
// firebase setup
import './firebase/init'
...


users db.js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...,
}

firebase.initializeApp(config)

import GenericDB from './generic-db'

export default class UsersDB extends GenericDB {
  constructor() {
    super('users')
  }
}

...
// firebase setup
import './firebase/init'
...


main.js

import firebase from 'firebase/app'
import 'firebase/auth'

const config = {
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...,
}

firebase.initializeApp(config)

import GenericDB from './generic-db'

export default class UsersDB extends GenericDB {
  constructor() {
    super('users')
  }
}

...
// firebase setup
import './firebase/init'
...


你可以这样做firebase auth

import firebase from 'firebase/app'
...
      const { user } = await firebase
        .auth()
        .createUserWithEmailAndPassword(form.email, form.password)

      // create a user in firestore `users` table
      const userDb = new UsersDB()
      const newUser = {
        email: form.email,
        name: form.name,
      }
      userDb.create(newUser, user.uid)
...

更改后，我发现以下2个错误：1）“FirebaseError:[代码=无效参数]：使用无效数据调用函数DocumentReference.set（）。不支持的字段值：未定义”，2）使用无效数据调用函数DocumentReference.set（）。不支持的字段值：未定义。我将添加另一个答案，说明如何在vue中处理firebase。