错误消息：未处理的运行时错误元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查SingleComment的渲染方法

**所有的道路指向它是一个无效的导入/导出，但我已经检查了一遍又一遍，并不认为这是。

本质上，我结合了一些我自己的工作，从firebase拉数据与一些不错的材料UI的例子，我看到.我知道我的数据是好的，从firebase检索，因为我可以存储在一个基本的列表通过测试内相同的组件.任何帮助将不胜感激.

Comments.js

import firebase from '../../../firebase/initFirebase'
import {
    getFirestore, collection, where, query, orderBy, limit, onSnapshot, addDoc, serverTimestamp
} from 'firebase/firestore'
import {
    Stack,
    Container,
} from "@mui/material/";

import SingleComment from "./SingleComment";

const Comments = ({ postId }) => {
    // console.log(postId)
    const [commentsLoading, setCommentsLoading] = useState(true);
    const [comments, setComments] = useState([]);
    // const [writeComment, setWriteComment] = useState("");
    const db = getFirestore()
    const commentsRef = collection(db, 'comments')
    // const firstBatch = query(commentsRef, where("postId", "==", postId), orderBy("createdAt"), limit(14))
    const [last, setLast] = useState(null);

    useEffect(() => {
        const q = query(collection(db, "comments"), where("postId", "==", postId), orderBy('createdAt'));
        const unsubscribe = onSnapshot(q, (querySnapshot) => {
            const getCommentsFromFirebase = [];
            querySnapshot.forEach((doc) => {
                getCommentsFromFirebase.push({
                    id: doc.id,
                    ...doc.data()
                })
            });
            setComments(getCommentsFromFirebase)
            // console.log(comments);
        });
        return unsubscribe
    }, []);

    return (
        <>
            {/* <Typography variant="h5">Comments</Typography>
            <List>
                {comments &&
                    comments.map((comment) => (
                        <ListItem key={comment.id}>
                            <ListItemText primary={comment.text} />
                        </ListItem>
                    ))}
                {!comments && <Typography>No comments yet</Typography>}
            </List> */}
            <Container maxWidth="md">
                <Stack spacing={3}>
                    {comments.map((comment) => {
                        return <SingleComment key={comment.id} onPass={comment} />;
                    })}
                </Stack>
            </Container>
        </>
    );
};

export default Comments;

// const Post = ({ post }) => {
//   return (
//     <>
//       <h1>{post.title}</h1>
//       <p>{post.content}</p>
//       <Comments postId={post.id} />
//     </>
//   );
// };

其他文件单注解.js

import {
    TextField,
    Button,
    Typography,
    Avatar,
    Card,
    Stack,
    ScoreChanger,
    ThemeProvider,
    Box

} from "@mui/material/";
import { Delete, Edit } from "@mui/icons-material";
import replyArrow from "../../../public/assets/icon-reply.svg"
import React, { useState } from "react";

const SingleComment = ({ onPass }) => {
    console.log(onPass)
    const { postId, text, createdAt } = onPass;
    const [editingComm, setEditingComm] = useState(false);
    const [commentText, setCommentText] = useState(text);
    const userName = "Dan"
    const handleOpen = () => {
        setOpenModal(true);
    };

    const handleClose = () => {
        setOpenModal(false);
    };

    return (
        <Card>
            <Box sx={{ p: "15px" }}>
                <Stack spacing={2} direction="row">
                    <Box>
                        <ScoreChanger onScore={"1"} />
                    </Box>
                    <Box sx={{ width: "100%" }}>
                        <Stack
                            spacing={2}
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                        >
                            <Stack spacing={2} direction="row" alignItems="center">
                                {/* <Avatar src={ava}></Avatar> */}
                                <Typography
                                    fontWeight="bold"
                                    sx={{ color: "neutral.darkBlue" }}
                                >
                                    {userName}

                                </Typography>
                                {/* {userName === "juliusomo" && <YouTag />} */}Test
                                <Typography sx={{ color: "neutral.grayishBlue" }}>
                                    {createdAt.toDate().toLocaleString()}
                                </Typography>
                            </Stack>
                            {userName === "juliusomo" ? (
                                <Stack direction="row" spacing={1}>
                                    <Button
                                        startIcon={<Delete />}
                                        sx={{
                                            color: "custom.softRed",
                                            fontWeight: 500,
                                            textTransform: "capitalize",
                                        }}
                                        onClick={() => {
                                            handleOpen();
                                        }}
                                    >
                                        Delete
                                    </Button>
                                    <Button
                                        variant="text"
                                        disabled={editingComm}
                                        sx={{
                                            fontWeight: 500,
                                            textTransform: "capitalize",
                                            color: "custom.moderateBlue",
                                        }}
                                        startIcon={<Edit />}
                                        onClick={() => setEditingComm(!editingComm)}
                                    >
                                        Edit
                                    </Button>
                                </Stack>
                            ) : (
                                <Button
                                    onClick={() => {
                                        setClicked(!clicked);
                                    }}
                                    variant="text"
                                    sx={{
                                        fontWeight: 500,
                                        textTransform: "capitalize",
                                        color: "custom.moderateBlue",
                                    }}
                                    startIcon={<img src={replyArrow} alt="reply sign" />}
                                >
                                    Reply
                                </Button>
                            )}
                        </Stack>
                        {editingComm ? (
                            <>
                                <TextField
                                    sx={{ p: "20px 0" }}
                                    multiline
                                    fullWidth
                                    minRows={4}
                                    id="outlined-multilined"
                                    placeholder="Don't leave this blank!"
                                    value={commentText}
                                    onChange={(e) => {
                                        setCommentText(e.target.value);
                                    }}
                                />
                                <Button
                                    sx={{
                                        float: "right",
                                        bgcolor: "custom.moderateBlue",
                                        color: "neutral.white",
                                        p: "8px 25px",
                                        "&:hover": {
                                            bgcolor: "custom.lightGrayishBlue",
                                        },
                                    }}
                                    onClick={() => {
                                        !commentText.trim()
                                            ? alert(
                                                "If  you want to remove the comment text, just delete the comment."
                                            )
                                            : setEditingComm(!editingComm);
                                    }}
                                >
                                    Update
                                </Button>
                            </>
                        ) : (
                            <Typography sx={{ color: "neutral.grayishBlue", p: "20px 0" }}>
                                {commentText}
                            </Typography>
                        )}
                    </Box>
                </Stack>
            </Box>
        </Card>
    )



}
export default SingleComment