React+Firebase项目中如何将uid作为参数传入Firestore数据库请求

问题核心原因 #

你遇到的权限报错不是因为没有手动传入uid参数，Firebase安全规则里的request.auth对象是服务端自动从请求携带的用户登录凭证解析生成的，不需要开发者手动在请求里附加。出现权限不足基本是以下几个原因：

• 发起数据库写入请求时，用户还未完成Firebase Auth登录，或者Auth的登录态还没初始化完成：React项目中Firebase Auth的登录态是异步加载的，如果你在组件挂载时直接发起请求，很可能此时Auth还没拿到登录用户信息，请求自然没有携带有效凭证。
  你可以通过onAuthStateChanged监听登录状态，确认用户已登录后再发起请求，示例代码：

  import { getAuth, onAuthStateChanged } from "firebase/auth";
  import { useEffect } from "react";
  
  const auth = getAuth();
  // 在组件挂载时添加监听
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        // 用户已登录，此时再发起Firestore请求就会自动携带登录凭证
        const uid = user.uid;
        await db.collection('users').doc(uid).set({name:name});
      } else {
        // 用户未登录，执行引导登录逻辑
      }
    });
    return () => unsubscribe();
  }, [])
  

• 检查你代码里的变量名是否拼写错误：你给出的写入代码里用的是uuid作为文档ID，如果你的全局上下文存的是登录返回的uid，变量名拼写错误也可能引发异常，注意确认变量名对应。
• 确认Firebase实例初始化正确：你项目里的Auth实例和Firestore实例必须来自同一个Firebase App初始化对象，不要分开初始化两次不同的App实例，否则登录态无法同步到Firestore请求中，正确的初始化示例：

  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    // 你的Firebase项目配置
  };
  
  // 只初始化一次app
  const app = initializeApp(firebaseConfig);
  // Auth和Firestore都从同一个app实例获取
  export const auth = getAuth(app);
  export const db = getFirestore(app);
  

补充说明 #

如果你需要在写入的文档内容里添加uid字段，直接从登录后的user对象或者你存储的全局上下文里取uid写入即可，这个和安全规则校验无关，安全规则的校验逻辑不需要你手动传任何参数，只要SDK携带了有效登录态就会自动通过request.auth != null的校验。

内容的提问来源于stack exchange，提问作者wick3d