React Native中Firebase Firestore报错：CollectionReference.doc()参数类型错误

Hey there, let's break down what's causing your error and fix your code step by step!

错误原因分析 #

1. 错误的UID传递 #

这是触发你看到的Firebase错误的核心原因：

const uid = firebase.auth().currentUser;

firebase.auth().currentUser返回的是一个完整的User对象，而非用户的UID字符串。当你把这个对象直接传给doc(uid)时，Firestore无法识别这个自定义对象类型，就抛出了"custom Q object"的报错——本质上它是在说："我需要一个非空字符串，你却给了我一个我不认识的对象"。

2. 文档数据获取错误 #

你代码里还有一个隐藏的语法错误：

...doc.id(),

doc.id本身就是文档ID的字符串，它没有id()这个方法！如果你想获取文档里的字段数据，应该使用doc.data()方法。

3. 未处理用户未登录的边界情况 #

currentUser可能为null（比如组件渲染时用户还没完成登录验证），直接访问currentUser.uid会导致额外报错，所以需要添加登录状态判断。

4. 未清理Firestore监听 #

onSnapshot会创建一个持续的实时监听，组件卸载时如果不取消订阅，会导致内存泄漏，所以要在useEffect的清理函数里处理这个问题。

修正后的完整代码 #

function userStoresList() { 
  const [userStores, userStoresUpdate] = useState([]); 

  useEffect(() => { 
    // 先获取当前用户，判断是否已完成登录
    const currentUser = firebase.auth().currentUser;
    if (!currentUser) {
      // 用户未登录时可清空列表或做其他提示处理
      userStoresUpdate([]);
      return;
    }

    // 正确提取用户UID字符串
    const uid = currentUser.uid;

    // 创建监听并保存取消订阅的函数
    const unsubscribe = firebase 
      .firestore() 
      .collection('users') 
      .doc(uid) // 现在传递的是正确的字符串UID
      .collection('stampcards') 
      .onSnapshot(snapshot => { 
        const newUserStores = snapshot.docs.map(doc => ({ 
          id: doc.id, 
          ...doc.data(), // 替换错误的doc.id()为正确的doc.data()
        })); 
        userStoresUpdate(newUserStores); 
      }); 

    // 组件卸载时取消Firestore监听，避免内存泄漏
    return () => unsubscribe();
  }, []); 

  return userStores; 
} 

function UserStampScreen() { 
  console.log('Initial Render (step 1)'); 
  const userStores = userStoresList(); 

  // 修正JSX结构：确保map渲染的组件在return的JSX范围内
  return (
    <>{/* 可根据需求替换为View等容器组件 */}
      {userStores.map(store => ( 
        <StampCards 
          key={store.id} 
          name={store.name} 
          promotion={store.promotion} 
          stamps="5/10 Stamps" 
          image={store.image} 
        /> 
      ))}
    </>
  );
}

关键修正点总结 #

• 用currentUser.uid替代直接使用currentUser对象，确保传递给doc()的是字符串类型的UID
• 用doc.data()获取文档字段数据，替换错误的doc.id()调用
• 添加用户登录状态判断，避免currentUser为null时的报错
• 在useEffect中添加监听清理函数，防止内存泄漏
• 修复UserStampScreen的JSX结构，确保列表渲染逻辑在return的JSX范围内

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