无法使用 Firebase v9 Modular React JS 读取未定义的属性（读取“indexOf”）

Question

我得到了这个简单的表单，用于注册用户并将 uid 和电子邮件数据发送到 firestore 上的集合，我使用最新版本的 Firebase 9 w/ 模块化。身份验证工作得很好，但 firestore 部分却不行。它向我抛出一个错误：

TypeError: Cannot read properties of undefined (reading 'indexOf')
at Function.fromString (path.ts:229)
at Ac2 (reference.ts:374)
at Login.jsx:29

我不知道这是什么意思，我试图按照“用户/（这里是 useruid）/所有用户数据”的顺序将注册用户的电子邮件和 uid 信息上传到 firestore，但会抛出该错误。

我留下我的代码：

import React, { useState, useEffect, useCallback } from 'react'
import { auth, db } from "../firebase"
import { createUserWithEmailAndPassword } from "firebase/auth";
import { collection, doc, addDoc, setDoc } from "firebase/firestore"; 



function Login() {
    const [email, setEmail] = useState('')
    const [pass, setPass] = useState('')
    const [error, setError] = useState('')
    const [userData, setUserData] = useState('')

    const ProcessData = e => {
        e.preventDefault()
        registro()
    }

    const registro = useCallback(async() => {

        try {
            await createUserWithEmailAndPassword(auth, email, pass)
            .then((userCredential) => {
                const user = userCredential.user;
                setUserData(user)
            })
            
            
            await addDoc(collection(db, 'users', userData.uid), {
                email: userData.email,
                uid: userData.uid
              })
                
            
            
            setEmail('')
            setPass('')
            setError('')

        } catch (error) {
            const errorCode = error.code;
            const errorMessage = error.message;

            setError(errorMessage)
            console.log(error)
        }
            
    }, [email, pass, error, userData])

    return (
        <div>
            <h3>Registro</h3>
            <form onSubmit={ProcessData}>
                <label>Email Adress</label>
                <input
                type="email"
                placeholder="Email Address"
                onChange={e => setEmail(e.target.value)}
                value={email}
                />
                <label>Password</label>
                <input
                type="password"
                placeholder="Password"
                onChange={e => setPass(e.target.value)}
                value={pass}
                />
                <button type="submit">Registrarse</button>
            </form>
        </div>
    )
}

export default Login

Answer 1

userData添加文档时，您不一定需要从状态读取数据。尝试直接从返回的对象传递参数user，这样任何路径段都doc()不会是未定义的：

try {
  const { user } = await createUserWithEmailAndPassword(auth, email, pass)
  setUserData(user)
  
  // db must not be undefined
  // try console.log(db) to ensure it's a Firestore instance
  await setDoc(doc(db, 'users', user.uid), {
  //    ^^^    ^^^<-- DocumentReference and not CollectionReference
    email: user.email,
    uid: user.uid
  })
                
} catch (e) {
  console.log(e)
}

此外，您还传递了 2 个路径段，其中collection()可能会返回错误，因为 CollectionReference 路径采用奇数个路径段。如果您希望用户的 UID 作为文档 ID，则使用setDocsinceaddDoc将生成随机 ID。