React+Firebase开发Ins克隆项目出现语法错误及firebase未定义问题求助

修复步骤 #

1. 修复App.js判断逻辑报错

找到ImageUpload组件渲染的判断代码，替换为如下内容，规避可选链语法兼容问题，同时避免读取null对象属性报错：

{user && user.displayName ? (
    <ImageUpload username={user.displayName} />
  ) : (
    <h3>sorry you need to login to upload</h3>
)}

同时优化auth状态监听的useEffect配置，删除不必要的依赖项、修正清理函数写法：

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((authUser) => {
    if (authUser) {
      //用户已登录
      console.log(authUser);
      setUser(authUser);
    } else {
      //用户已登出
      setUser(null);
    }
  })

  return () => {
    //执行清理操作
    unsubscribe();
  }
}, []);

2. 修复ImageUpload组件参数接收错误

组件参数是props对象，需要解构才能拿到传入的username值，修改组件定义代码：

// 错误写法：function ImageUpload(username)
function ImageUpload({username}) {

3. 修复firebase未定义报错

ImageUpload.js中的firebase导入逻辑和项目配置不匹配，将导入语句替换为：

// 错误写法：import firebase from 'firebase/app'
import firebase from 'firebase';

4. 修复存储路径拼接错误

模板字符串需要使用反引号包裹才能解析变量，修改上传路径代码：

// 错误写法：storage.ref('images/${image.name}').put(image)
const uploadTask = storage.ref(`images/${image.name}`).put(image);

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