从Firebase加载数据渲染组件时遇未处理运行时错误求助

错误根源 #

你遇到的“元素类型无效”错误，核心原因并非SingleComment的导入导出问题，而是以下几个具体问题：

1. 导入了不存在的组件：从@mui/material导入的ScoreChanger并非Material UI的内置组件，这个变量实际是undefined，React尝试渲染它时就会抛出该错误。
2. 未定义的状态变量：SingleComment中使用了openModal、clicked两个状态，但没有通过useState初始化，会引发运行时错误。
3. 缺失React Hooks导入：Comments组件中使用了useState和useEffect，但没有从React导入这两个钩子，导致组件无法正常初始化。

分步修复 #

1. 修复Comments.js的钩子导入 #

在文件顶部添加React钩子的导入：

import React, { useState, useEffect } from "react";

2. 处理不存在的组件 #

ScoreChanger和YouTag不是Material UI的组件，你需要：

• 若这两个是自定义组件，确认它们的文件路径并正确导入；
• 若暂时不需要，先注释掉相关代码：

// <ScoreChanger onScore="1" />
// {userName === "juliusomo" && <YouTag />}

3. 补全SingleComment中缺失的状态 #

在SingleComment组件内添加两个状态的初始化：

const [openModal, setOpenModal] = useState(false);
const [clicked, setClicked] = useState(false);

验证 #

完成以上修改后重新运行项目：

• Comments组件能正常初始化并获取Firebase数据；
• SingleComment组件不再渲染undefined元素，状态变量也能正常工作，之前的错误会消失。

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