从Cloud Firestore获取的聊天记录在React前端无法显示求助

我正在开发一款Web应用，需要从Cloud Firestore数据库获取问答聊天记录并在前端展示。通过浏览器开发者工具的Network标签确认聊天记录已成功获取，但内容无法在应用中显示。

后端Flask代码 #

@application.route('/chat-history', methods=['POST'])
def get_user_chat_history():
    user_id = request.json['user_id']
    document_id = request.json['document_id']

    if not user_id or not document_id:
        return jsonify({"error": "Missing required parameters: user and document"}), 400

    user_chats_ref = db.collection("ChatHistory").document(user_id).collection(str(document_id)).document("chats")

    try:
        chat_doc = user_chats_ref.get()

        if not chat_doc.exists:
            return jsonify({"error": "No chat history found"}), 404

        chat_data = chat_doc.to_dict()
        chat_array = chat_data.get('chat', [])

        sorted_chat_array = sorted(chat_array, key=lambda x: float(x['timestamp']), reverse=True)

        return jsonify(sorted_chat_array), 200

    except Exception as e:
        print(f'Error fetching chat history for user {user_id}: {e}')
        return jsonify({"error": "Error fetching chat history"}), 500

前端React代码 #

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (!user) {
        navigate("/login");
      }
    });
    populateChat();
    return () => unsubscribe();
}, []);

async function populateChat() {
    const response = await fetch(`${baseurl}/chat-history`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            user_id: uid,
            document_id: profileName,
        }),
    });

    try {
        const data = await response.json();
        const transformData = (data) => {
            const transformed = [];

            data.forEach((item) => {
                for (const key in item) {
                    item[key].forEach((entry) => {
                        if (entry.question) {
                            transformed.push({ user: "user", message: entry.question });
                        }
                        if (entry.answer) {
                            transformed.push({ user: "bot", message: entry.answer });
                        }
                    });
                }
            });
            return transformed;
        };
        const transformedData = transformData(data);
        const firstFiveTexts = transformedData.slice(0, 6);
        // Assuming you are setting the state somewhere here to update the UI with firstFiveTexts
    } catch (error) {
        console.error('Error fetching chat history:', error);
    }
}

已尝试的操作 #

• 验证后端返回的数据结构正确
• 通过浏览器Network标签确认数据获取成功
• 确认populateChat函数已执行并完成数据处理

可能的问题及调试建议 #

1. 状态未正确更新：代码注释仅提及假设设置状态，但实际无状态更新逻辑。必须将处理后的firstFiveTexts赋值给React状态变量，比如：

   // 假设已定义状态变量chatMessages
   setChatMessages(firstFiveTexts);
   

   没有状态更新，UI无法感知数据变化，自然不会渲染。

2. 数据转换逻辑错误：在transformedData生成后添加console.log(transformedData)，确认转换后的数组结构是否符合预期（每个元素需包含user和message字段），排查是否存在遍历或字段判断错误。

3. UI渲染逻辑缺失或错误：确保UI部分有遍历状态变量并渲染聊天内容的代码，示例：

   {chatMessages.map((msg, index) => (
     <div key={index} className={msg.user === 'user' ? 'user-message' : 'bot-message'}>
       {msg.message}
     </div>
   ))}
   

   同时确认状态变量初始值为数组，避免遍历时报错。

4. 依赖项问题：useEffect依赖数组为空，若uid或profileName是动态获取的（如从Auth状态中获取），调用populateChat时可能还未初始化，导致请求参数错误。需将这两个变量加入依赖数组，并判断有值后再执行请求：

   useEffect(() => {
       const unsubscribe = auth.onAuthStateChanged((user) => {
         if (!user) {
           navigate("/login");
         }
       });
       if (uid && profileName) {
           populateChat();
       }
       return () => unsubscribe();
   }, [uid, profileName]);
   

5. 错误处理遗漏：在response.json()前检查response.ok，若请求返回错误状态码（如404、500），直接抛出错误，避免处理错误数据：

   if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
   }
   

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