我正在开发一个使用Firebase Firestore进行数据库操作的React应用程序。我最近升级到了Firebase版本9,并切换到模块化语法来导入Firebase服务。
但是,我在尝试访问Firestore中的集合方法时遇到了错误。错误消息为“类型'Firestore'上不存在属性'collection'。”
下面是我的代码片段:
import React, { useRef } from "react";
import { FormEvent } from "react";
import contactcss from "./Contact.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Card from "../../components/ui/Card";
import {
faInstagram,
faFacebook,
faLinkedin,
faDiscord,
} from "@fortawesome/free-brands-svg-icons";
import emaillogo from "../../resources/email-logo.png";
import firebase from 'firebase/app';
import 'firebase/firestore';
import { getFirestore } from 'firebase/firestore';
//import { randomString } from "../../App";
// testing config toggle
let isTesting = true
// Your web app's Firebase configuration
// testConfig goes here
const testConfig = {
apiKey: "AIzaSyD1Z8u6LAQDrwBAd-t-aMzoYFpgrfjFH0E",
authDomain: "gdscusyd-test.firebaseapp.com",
projectId: "gdscusyd-test",
storageBucket: "gdscusyd-test.appspot.com",
messagingSenderId: "430942619633",
appId: "1:430942619633:web:e4b3661fac99d31cd5e650",
measurementId: "G-DCF0X0L8QY"
};
// prodConfig goes here
const prodConfig = {
apiKey: "AIzaSyCdgEs7mefO_Woe3UJA7lgdlrtiqjpmfCI",
authDomain: "gdsc-usyd.firebaseapp.com",
databaseURL: "https://gdsc-usyd-default-rtdb.firebaseio.com",
projectId: "gdsc-usyd",
storageBucket: "gdsc-usyd.appspot.com",
messagingSenderId: "971303209941",
appId: "1:971303209941:web:a6d9fa662f48a20916cb5c",
measurementId: "G-HB1NEN3G3J"
};
let appConfig = isTesting ? testConfig : prodConfig;
// Initialize Firebase
const app = firebase.initializeApp(appConfig);
// Initialize db
const db = getFirestore(app);
// generate random string of specified length
export function randomString(length: number) {
var result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
export async function sendData(data: any, id: string) {
await db.collection('contact-form').doc(id).set({ content: data });
}
const processData = async (event: FormEvent) => {
event.preventDefault();
// @ts-ignore
const elementsArray = [...event.target.elements];
const data = elementsArray.reduce((acc, element) => {
if (element.id) {
acc[element.id] = element.value;
}
return acc;
}, {});
try {
if (data.name === '') throw("Name cannot be left empty")
if (data.email === '') throw("Email cannot be left empty")
if (data.message === '') throw("Message cannot be left empty")
await sendData(data, randomString(10))
}
}
function Contact() {
return (
<div>
<div>
<div className={contactcss.background}>
<img
className={contactcss.emaillogo}
src={emaillogo}
alt="Contact Us"
/>
<div className={contactcss.contact}>Contact Us</div>
</div>
</div>
<Card
title="We're keen to hear from you!"
imageUrl="https://images.app.goo.gl/D6m6hHMnP1gjsKKV7"
body=""
/* onSubmitForm={submitFormHandler} */ // Placeholder comment
/>
<div className={contactcss.whitebackground}>
<div className={contactcss.socials}>
<h1>Follow Our Socials</h1>
<p className={contactcss.socialmedia}>
Stay connected with GDSC USYD by following us on our social media
channels:
</p>
<div>
<a href="https://www.instagram.com/gdscusyd/">
<FontAwesomeIcon
className={contactcss.instagram}
icon={faInstagram}
/>
</a>
<a href="https://www.facebook.com/gdsc.usyd">
<FontAwesomeIcon
className={contactcss.facebook}
icon={faFacebook}
/>
</a>
<a href="https://discord.com/channels/872033047652990986/872033047652990989">
<FontAwesomeIcon
className={contactcss.discord}
icon={faDiscord}
/>
</a>
<a href="https://www.linkedin.com/company/gdsc-usyd/">
<FontAwesomeIcon
className={contactcss.linkedin}
icon={faLinkedin}
/>
</a>
</div>
</div>
</div>
</div>
);
};
export default Contact;
字符串
我已经根据迁移指南从Firebase的模块化语法导入了initializeApp、getFirestore、collection、doc和set,但我仍然收到错误。
我尝试了各种解决方案,例如重新排序导入,重新检查我的Firebase配置,以及更新我的Firebase依赖项,但似乎没有解决问题。
有人能帮助我理解为什么我得到这个错误,以及我如何才能正确地访问Firestore中的集合方法与Firebase v9模块化语法?
提前感谢您的任何帮助!
3条答案
按热度按时间pcww981p1#
您必须将路由 Package 到
<Switch>
标记中。您的路线应如下所示:
字符串
试试这个。
puruo6ea2#
也许你可以在你的app.js文件中尝试这个版本(请将你的代码添加为文本,而不是图像):
字符串
ibps3vxo3#
您必须将路由 Package 到
<Routes>
标记中。