个人资料标题未显示（未找到用户）错误

Question

所以我创建了一个 Instagram 克隆，在其中我转到个人资料部分，它说找不到用户，但在我的代码中，当我删除“最后”块时，它只显示骨架，但它应该在 1 秒内显示个人资料，请帮助我解决它在此处输入图像描述此图像是在写入finally块时，在此处输入图像描述此图像是在删除finally块时存在某种逻辑错误请帮我解决它，这是代码对于

useGetUserProfileByUsername.js

import { useEffect, useState } from "react";
import useShowToast from "./useShowToast";
import { collection, getDocs, query, where } from "firebase/firestore";
import { firestore } from "../firebase/firebase";
import useUserProfileStore from "../store/userProfileStore";

const useGetUserProfileByUsername = (username) => {
  const [isLoading, setIsLoading] = useState(true);
  const showToast = useShowToast();
  const {userProfile, setUserProfile} = useUserProfileStore();

  useEffect(() => {
    const getUserProfile = async () => {
      setIsLoading(true);
      try {
        const q = query(
          collection(firestore, "users"),
          where("username", "==", username)
        );
        const querySnapshot = await getDocs(q);

        if (querySnapshot.empty) return setUserProfile(null);
        let userDoc;
        querySnapshot.forEach((doc) => {
          userDoc = doc.data();
        });
        setUserProfile(userDoc);
        console.log(userDoc);
      } catch (error) {
        showToast("Error", error.message, "error");
      } 
    };

    getUserProfile();
  }, [setUserProfile,username,showToast]);
  return {isLoading, userProfile};
};

export default useGetUserProfileByUsername;

这是代码

UserProfileStore.js

import { create } from "zustand";

const useUserProfileStore = create((set) => ({
    userProfile : null,
    setUserProfile : (userProfile) => set({userProfile})
}))

export default useUserProfileStore

这是代码

ProfilePage.jsx

import { Container,Flex, Skeleton, SkeletonCircle, Text, VStack } from "@chakra-ui/react"
import ProfileHeader from "../../components/Profile/ProfileHeader"
import ProfilePosts from "../../components/Profile/ProfilePosts"
import ProfileTabs from "../../components/Profile/ProfileTabs"
import useGetUserProfileByUsername from "../../hooks/useGetUserProfileByUsername"
import { Link, useParams } from "react-router-dom"
import {Link as RouterLink} from  "react-router-dom"

const ProfilePage = () => {
  const {username} = useParams()
  const {isLoading,userProfile} = useGetUserProfileByUsername(username)
  
  const userNotFound = !isLoading && !userProfile
  if (userNotFound) return <UserNotFound />


  return (
    <Container maxW={"container.lg"} py={5}>
      <Flex py={10} px={4} pl={{base:4,md:10}} w={"full"} mx={"auto"} flexDirection={"column"}>
      {!isLoading && userProfile && <ProfileHeader />}
                {isLoading && <ProfileHeaderSkeleton />}
      
      </Flex>
      <Flex 
      px={{base:2,sm:4}}
      maxW={"full"}
      mx={"auto"}
      borderTop={"1px solid"}
      borderColor={"whiteAlpha.300"}
      direction={"column"}
      >
        <ProfileTabs/>
        <ProfilePosts/>
      </Flex>
        
    </Container>
  )
}

export default ProfilePage

const ProfileHeaderSkeleton = () => {
    return (
        <Flex
            gap={{ base: 4, sm: 10 }}
            py={10}
            direction={{ base: "column", sm: "row" }}
            justifyContent={"center"}
            alignItems={"center"}
        >
            <SkeletonCircle size='24' />

            <VStack alignItems={{ base: "center", sm: "flex-start" }} gap={2} mx={"auto"} flex={1}>
                <Skeleton height='12px' width='150px' />
                <Skeleton height='12px' width='100px' />
            </VStack>
        </Flex>
    );
};

const UserNotFound = () => {
  return (
    <Flex flexDir={"column"} textAlign={"center"} mx={"auto"}>
        <Text fontSize={"2xl"} >
            User Not Found
        </Text>
        <Link as={RouterLink} to={"/"} color={"blue.500"} w={"max-content"} mx={"auto"}>
        Go Home
        </Link>
    </Flex>
  )
}

我尝试过 chatgpt 但它说调试提示 检查 Firebase 配置：

确保您的 Firebase 项目设置正确并且 Firestore 规则允许读取访问。 添加日志记录：

在 getUserProfile 函数中添加更多日志记录，以检查每个步骤发生的情况。 单独测试查询：

在简单的脚本中单独运行 Firestore 查询，以确保它返回预期结果。

Answer 1

也许您可以从后端发送整个

<embed>

标签以及

src

。然后在任何

dangerouslySetInnerHTML

中使用

<div>

属性，并将作为响应获得的整个

<embed>

标签作为属性的值。

这会自动将

<embed>

标签设置为您在后端分配的任何

src

值。

示例：

<div dangerouslySetInnerHTML={{ __html: "<embed src='...'>" }} />