问不确定firebase是否连接到我的应用程序并正常工作

EN

0 null
ProgressBar.jsx:6 
0 null
connection.ts:81          
POST https://firebasestorage.googleapis.com/v0/b/clone-netninja-firegram.appspot.com/o?name=ssc.jpg 403
send @ connection.ts:81
ProgressBar.jsx:6 0 null
ProgressBar.jsx:6 0 null

{
  "name": "firegram",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "firebase": "^9.6.8",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

// import * as firebase from 'firebase/app'
import 'firebase/storage';
// import 'firebase/firestore';
//to use firebase app
// import firebase from 'firebase/app'; //older version
import firebase from 'firebase/compat/app'; //v9

//to use auth
// import 'firebase/auth'; //older version
import 'firebase/compat/auth'; //v9

//to use firestore
// import 'firebase/firestore'; //Older Version
import 'firebase/compat/firestore'; //v9
import 'firebase/compat/storage'; //v9
// Your web app's Firebase configuration
const firebaseConfig = { [[REDACTED]] };

// Initialize Firebase
// const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);

// Initialize two services
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();

export { projectStorage, projectFirestore };

import React from 'react';
import useStorage from '../hooks/useStorage';

const ProgressBar = ({ file, setFile }) => {
  const { url, progress } = useStorage(file);
  console.log(progress, url)
  return <div className='progress-bar'>ProgressBar</div>;
};

export default ProgressBar;

import { useState, useEffect } from 'react';
import { projectStorage } from '../firebase/config';

const useStorage = (file) => {
  const [progress, setProgress] = useState(0);
  const [err, setErr] = useState(null);
  const [url, setUrl] = useState(null);

  useEffect(() => {
    // references
    const storageRef = projectStorage.ref(file.name);

    storageRef.put(file).on('state_changed', (snap) => {
      let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
      setProgress(percentage);

    }, (err) => {
      setErr(err)
    }, async () => {
      const url = await storageRef.getDownloadURL();
      setUrl(url)
    });
  }, [file])

  return { progress, url, err }
}

export default useStorage;