如何修復錯誤：對象作為 React 子對象無效（找到：[object Promise]）

Question

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in ul (at ChatRoom.js:16)

由於某種原因，它會引發此錯誤。 這是我的代碼：

const [messages] = useCollectionData(query, { idField: 'id' });
return (
    <div className={classes.ChatRoomContainer}>
        <ul>
            {messages ? messages && messages.map(async msg => {
                const messageClass = msg.userId === props.userId ? classes.Sent : classes.Recieved;
                let username;
                await firebase.firestore().collection('users').doc(msg.author).get().then(doc => {
                    username = doc.data().userName;
                });
                return <li className={messageClass + ' ' + classes.Message} key={msg.id}>
                    <label>{msg.author !== props.userId ? username : 'You'}</label>
                    <p className={classes.MessageContent}>{msg.messageContent}</p>
                </li>
            }) : <p>Loading...</p>}
        </ul>
        <form className={classes.Form} onSubmit={(e) => props.onMessageSentHandler(e)}>
            <input className={classes.Input} placeholder="Type your message..." onChange={(e) => props.onInputChangedHandler(e)} value={props.messageInput} />
            <button className={classes.Btn}><FontAwesomeIcon color="white" icon='paper-plane' className={classes.PaperPlaneIcon} /></button>
        </form>
    </div>
)

有什么辦法可以解決嗎？ 僅當我順便使用 async 時才會出現。

Answer 1

您正在嘗試執行 Promise 兩次。

async/await和.then().catch是兩種不同的語法。

嘗試這個：

let doc = await firebase.firestore().collection('users').doc(msg.author).get();

然后從中讀取用戶名：

return (
    <li className={messageClass + ' ' + classes.Message} key={msg.id}>
       <label>{msg.author !== props.userId ? doc.data().username : 'You'}</label>
       <p className={classes.MessageContent}>{msg.messageContent}</p>
    </li>
)