Firebase.collection 不是函数
Firebase.collection is not a function
Net Ninja's React Redux & Firebase Tutorial(2018)
目前正在完成本教程,并在 5:56 进入他的教程,他在 projectActions.js。提供的代码是我的代码的精确副本。
但是我得到这个错误:
TypeError: firebase.collection is not a function
这是我的代码:
export const createProject = (project) => {
return (dispatch, getState, { getFirebase, getFirestore}) => {
//make an async call to firebase
const firebase = getFirestore();
firebase.collection('projects').add({
...project,
authorFirstName: 'Net',
authorLastName: 'Ninja',
authorID: 12345,
createdAt: new Date(),
}).then(() => {
dispatch({ type: 'CREATE_PROJECT', project});
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err});
})
}
};
查看了 Firebase 的文档,但无济于事,因此不确定如何解决此错误
感谢您的帮助
编辑 1
根据要求,我的配置文件(已删除数据):
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import firebase from 'firebase/compat/app';
import 'firebase/firestore';
import 'firebase/auth';
// 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
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase;
'firestore'returns的对象长这样:
您似乎安装了新的模块化 SDK (V9.0.0+
) 并按照使用旧名称空间语法的旧教程进行操作。我建议遵循 documentation 并切换到更新的语法(文档还包含使用旧语法的示例)。尝试将您的代码重构为:
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore'
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const firestore = getFirestore(app)
import { firestore } from '../path/to/config/file';
import { collection, addDoc } from "firebase/firestore";
export const createProject = (project) => {
return (dispatch, getState, { getFirebase, getFirestore}) => {
//make an async call to firebase
addDoc(collection(db, "projects"), {
...projectData
}).then(() => {
dispatch({ type: 'CREATE_PROJECT', project});
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err});
})
}
};
我找到了自己的解决方案
我的代码不起作用的原因是因为我没有将初始化的 app
导入到我的索引文件中。并将其传递给 getFirestore()
。因此,配置和 createProject
函数之间没有联系。
代码如下:
import app from '../../config/fbConfig.js';
export const createProject = (project) => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
//make an async call to firebase
const db = getFirestore(app).collection("projects")
db.add({
...project,
authorFirstName: 'Net',
authorLastName: 'Ninja',
authorID: 12345,
createdAt: new Date(),
}).then(() => {
dispatch({ type: 'CREATE_PROJECT', project });
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err });
})
}
};
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import firebase from 'firebase/compat';
// 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
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// export const auth = getAuth(app);
export default app
这会在 firebase 数据库中创建一个新集合。
Net Ninja's React Redux & Firebase Tutorial(2018)
目前正在完成本教程,并在 5:56 进入他的教程,他在 projectActions.js。提供的代码是我的代码的精确副本。 但是我得到这个错误:
TypeError: firebase.collection is not a function
这是我的代码:
export const createProject = (project) => {
return (dispatch, getState, { getFirebase, getFirestore}) => {
//make an async call to firebase
const firebase = getFirestore();
firebase.collection('projects').add({
...project,
authorFirstName: 'Net',
authorLastName: 'Ninja',
authorID: 12345,
createdAt: new Date(),
}).then(() => {
dispatch({ type: 'CREATE_PROJECT', project});
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err});
})
}
};
查看了 Firebase 的文档,但无济于事,因此不确定如何解决此错误
感谢您的帮助
编辑 1
根据要求,我的配置文件(已删除数据):
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import firebase from 'firebase/compat/app';
import 'firebase/firestore';
import 'firebase/auth';
// 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
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase;
'firestore'returns的对象长这样:
您似乎安装了新的模块化 SDK (V9.0.0+
) 并按照使用旧名称空间语法的旧教程进行操作。我建议遵循 documentation 并切换到更新的语法(文档还包含使用旧语法的示例)。尝试将您的代码重构为:
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore'
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const firestore = getFirestore(app)
import { firestore } from '../path/to/config/file';
import { collection, addDoc } from "firebase/firestore";
export const createProject = (project) => {
return (dispatch, getState, { getFirebase, getFirestore}) => {
//make an async call to firebase
addDoc(collection(db, "projects"), {
...projectData
}).then(() => {
dispatch({ type: 'CREATE_PROJECT', project});
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err});
})
}
};
我找到了自己的解决方案
我的代码不起作用的原因是因为我没有将初始化的 app
导入到我的索引文件中。并将其传递给 getFirestore()
。因此,配置和 createProject
函数之间没有联系。
代码如下:
import app from '../../config/fbConfig.js';
export const createProject = (project) => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
//make an async call to firebase
const db = getFirestore(app).collection("projects")
db.add({
...project,
authorFirstName: 'Net',
authorLastName: 'Ninja',
authorID: 12345,
createdAt: new Date(),
}).then(() => {
dispatch({ type: 'CREATE_PROJECT', project });
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err });
})
}
};
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import firebase from 'firebase/compat';
// 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
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// export const auth = getAuth(app);
export default app
这会在 firebase 数据库中创建一个新集合。