React 组件不会在 props 更改时重新渲染

Question

我尝试使用 Firebase 创建一对一的 1v1 聊天，我首先检索 ,,fbDocChatId" 使用 ,,user" 作为依赖数组，首先在 useEffect 中设置 ,,fbDocChatId" 然后将其添加到依赖项数组中第二个useEffect，fbDocChatId改变时不会触发这个use effect。

    const ChatDialog = ({
                    open,
                    close,
                    user, 
                    loggedInUser,
                }) => {

    const [messages, setMessages] = useState([])
    const [fbDocChatId, setfbDocChadId] = useState(null)

    useEffect(() => {

    const chatId = "43252352346242"
    db
        .doc(`chat/${chatId}`)
        .get()
        .then(res => {
            console.log(res){
                setfbDocChadId(res.id)
        })
    }, [user])

    useEffect(() => {
    db
        .doc(`chat/${fbDocChatId}`)
        .onSnapshot(snap => {
                snap.data().messages.forEach(messageId => {
                    db
                        .doc(`messages/${messageId}`)
                        .get()
                        .then(res => {
                           retrievedMessages.push({data: res.data(), id: res.id})
                        })
                        .catch(err => {
                            console.error(err)
                        })
                })

                setMessages(retrievedMessages)
            }
        })
}, [fbDocChatId])


    const handleSubmit = (e) => {
    e.preventDefault();
    setReply("");

    db.collection("messages").add({
        sentBy: loggedInUser,
        message: reply,
        timestamp: firebase.firestore.FieldValue.serverTimestamp()
    }).then(data => {
        // update chat
        db
            .doc(`chat/${fbDocChatId}`)
            .update({messages: firebase.firestore.FieldValue.arrayUnion(data.id)}, {merge: true})
            .then(res => {
                console.log("Success")
            })
    }).catch(err => {
        console.log(err)
    })




    return (
    <Dialog
        open={open}
        onClose={close}
        maxWidth={"lg"}

    >
        <DialogContent>
            <Grid container>
                <Grid item>

                    <Paper style={{height: "70%", overflowY: "scroll"}}>
                        {messages.map(({data, id}) => <Message key={id} user={loggedInUser} data={data}/>)}
                    </Paper>

                    <div className="mt-2" id="commentArea">
                        <Paper>
                            <InputBase
                                value={reply}
                                onChange={(e) => setReply(e.target.value)}
                                onSubmit={(e) => handleSubmit(e)}
                                placeholder="Type here"
                            />

                            <IconButton
                                className="p-3"
                                aria-label="directions"
                                disabled={!fbDocChatId}
                                onClick={(e) => handleSubmit(e)}>
                                <SendIcon/>
                            </IconButton>
                        </Paper>
                    </div>
                </Grid>
                
            </Grid>
        </DialogContent>
    </Dialog>
)

};``

  export default connect(state => ({
  loggedInUser: state.user.credentials.handle
}))(ChatDialog);

或者像这样的效果链接起来可能不是一个好习惯？ 非常感谢