第 1 步：
在仪表板上，单击“恢复数据库”。
然后，您将看到此弹出窗口。选择所需的模式，然后单击下一步，但在本文中，我将使用生产模式。
接下来，选择您的 Firestore 位置。我将使用 nam5（美国）。选择您的并单击启用。
步骤 2 ：
之后，将出现此页面。导航到“规则”。
您将看到以下规则：
rules_version = '2';
Service Cloud.firestore { match /databases/{database}/Documents { match /{document=**} {
allow read， write： if false;
}
}
}
将上述规则更改为：
rules_version = '2';
Service Cloud.Firestore { match /databases/{database}/Documents { match /{document=**} {
allow read， write： if request.auth ！= null;
}
}
}
第 3 步：
我假设您已经创建了“firebase-config.js”文件。在下面的代码中，您将看到我从“firebase/firestore”导入了“getFirestore”，然后我创建并导出了一个名为“db”的变量。
从“Firebase/app”导入 { initializeApp };
从“firebase/auth”导入 { getAuth };
从“Firebase/Firestore”导入 { getFirestore };
TODO：为要使用的 Firebase 产品
添加 SDK const firebaseConfig = { ............
.............
.........................
.........................
.........................
};
Initialize Firebaseexport const app = initializeApp（firebaseConfig
）;
export const auth = getAuth（app）;
export const db = getFirestore（app）
第 4 步：
在您的注册组件上，从 firebase/firestore 导入文档 setDoc，然后导入“db”，即您在上面从 firebase-config 创建和导出的变量
从“firebase/firestore”导入 { doc， setDoc };
从 “../firebase-config”;
第五步：（最后一步）
在注册组合的“handleSubmit”函数中，在“try/then”块内创建一个变量。你可以随心所欲地命名它，但我将使用“userId”作为示例，并为其分配一个值Response.user.uid
const [fullName， setFullName] = useState<string>（“”）;
const [email， setEmail] = useState<string>（“”）;
const [password， setPassword] = useState<string>（“”）;
const [dateOfBirth， setDateOfBirth] = useState<string>（“”）
const [userName， setUsername] = useState<string>（“”）;
const handlesubmit = （） => {
createUserWithEmailAndPassword（auth， email， password）
.then（async （response） => {
const userid = response.用户。UID;
setTimeout（（） => {
navigate（'/Homepage'）; }， 3000）;
try { await setDoc（doc（db， “users”， userid）， {
fullName： fullName， username： userName，
email： email， dateOfBirth： dateOfBirth，
}）; }
捕获 （e） {
控制台。错误（“添加文档时出错：”， e）;
}
}）
。catch（（错误） => {
控制台。日志（错误）
}
});
};
总之，在 React JS 中集成 Firebase Auth 和 Firestore 数据库使开发人员能够构建安全高效的 Web 应用程序。按照本文中概述的步骤操作，您可以无缝连接 Firebase 身份验证和 Firestore，从而打造卓越的用户体验。利用 Firebase 身份验证和实时数据库功能的强大功能来创建安全、响应迅速且动态的网络应用。
标签：JavaScript,编程,handleSubmit 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。