如何通过反应从前端将 object 添加到我的 firestore？ 不断收到错误 Uncaught Error: Objects are not valid as a React child

Question

I want to add an object to my firestore that looks like this: ]

This is the code where I add the object:

updateDoc(usersRef, { //adding username to users field in firestore
                users: arrayUnion({ username: "yeah", items: items })
            })

If I need this object in this specific way how else can I do this? Does anyone have any ideas?

I tried looking around and there are similar posts but they are mostly by mistake and not people needing actual objects.

Answer 1

Uncaught Error: Objects are not valid as a React child means you are trying to render an object in your jsx. You can only render one property at at at time.

<div>{user.username}</div>
{user.items.map((item)=>(
    <div>{item}</div>
))

**assuming each "item" is one value (ie string or number etc..)

Furthermore firestore updateDoc takes a ref as its first argument and the object as is second.

You already have the ref usersRef which I think a collection not a document, but I believe that firestore will add a document anyway, so just add the object (without any arrayUnion). assuming items is an array then boom!

// const usersRef = collection(firestore, "users")
await updateDoc(usersRef, { username: "yeah", items: items })

firestore will add an id automatically.

Technically you should be updating by getting a ref for a particular document first and using setDoc() for creating

const usersRef = collection(firestore, "users")

// This is create new document
const newDoc = await setDoc(usersRef, {username: "yeah", items: items})

// This will update only properties you include in the object
const userRef = doc(usersRef, {newDoc.id})
await updateDoc(usersRef, {items: newItems})