Reactで名前保存と写真保存がうまくいかない

Question

前提

現在ポートフォリオを作成しており、
Firebase authで登録したユーザー画像と名前を変更したいと考えています。
変更は下記URLで、写真と名前を同時に変更することはできるのですが、
名前だけ変更しようとエラーが出てしまいます。

URL
https://manga-kousatu-jsuvf4rdp-takoyan33.vercel.app/profile/edit/

id [e-mail]
pass sample345!

github

https://github.com/takoyan33/manga-kousatu.net/tree/new-main

参考記事
https://masa-engineer-blog.com/next-js-firebase-file-upload/

実現したいこと

発生している問題・エラーメッセージ

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')
    at [Category]-9a3902376556eef9.js:1:1175
    at l (main-6a3a6abc478270a2.js:1:95654)
    at Generator._invoke (main-6a3a6abc478270a2.js:1:95442)
    at P.forEach.e.<computed> [as next] (main-6a3a6abc478270a2.js:1:96077)
    at u ([Category]-9a3902376556eef9.js:1:624)
    at i ([Category]-9a3902376556eef9.js:1:827)
    at [Category]-9a3902376556eef9.js:1:886
    at new Promise (<anonymous>)
    at [Category]-9a3902376556eef9.js:1:767
    at [Category]-9a3902376556eef9.js:1:

参考記事とほとんど同じ書き方をしているので、if文の条件を変えたりしているのですが、上手くいきません。
分かる方がいれば教えて頂きたいです。
よろしくお願いします。

//Upload.jsx
//if文でimageが""の場合の処理を書いているのですが、
//const ext = image.name.split(".").pop();　のエラーが出てしまいます。

import { app, database, storage } from "../../firebaseConfig";
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";

//single image file upload
export const postImage = async (image = null) => {
  let uploadResult = "";

  if (image === "") {
    return uploadResult;
  } else {
    const storageRef = ref(storage);
    const ext = image.name.split(".").pop();
    const hashName = Math.random().toString(36).slice(-8);
    const fullPath = "/images/" + hashName + "." + ext;
    const uploadRef = ref(storageRef, fullPath);

    // 'file' comes from the Blob or File API
    await uploadBytes(uploadRef, image).then(async function (result) {
      console.log(result);
      console.log("Uploaded a blob or file!");

      await getDownloadURL(uploadRef).then(function (url) {
        uploadResult = url;
        console.log(uploadResult);
      });
    });
  }
  return uploadResult;
};

//edit/index.tsx
import React from "react";
import { useEffect, useState } from "react";
import Link from "next/link";
import { app, database } from "../../../firebaseConfig";
import { collection, getDocs } from "firebase/firestore";
import { useRouter } from "next/router";
import { getAuth, sendEmailVerification, updateProfile } from "firebase/auth";
import { MuiNavbar } from "../../../layouts/components/MuiNavbar";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { postImage } from "../../api/upload";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Head from "next/head";
import Image from "react-image-resizer";

export default function Edit() {
  const [image, setImage] = useState<string>();
  const [result, setResult] = useState("");
  const [displayName, setDisplayName] = useState<string>();
  let router = useRouter();
  const databaseRef = collection(database, "CRUD DATA");
  const [createObjectURL, setCreateObjectURL] = useState<string>(null);
  const [downloadURL, setDownloadURL] = useState<string>(null);
  const auth = getAuth();
  const user = auth.currentUser;

  const uploadToClient = (event) => {
    if (event.target.files && event.target.files[0]) {
      if (event == "") {
        setImage("");
        setCreateObjectURL("");
      } else {
        const file = event.target.files[0];
        setImage(file);
        setCreateObjectURL(URL.createObjectURL(file));
      }
    } else {
      setImage("");
      setCreateObjectURL("");
    }
  };

  const updatename = async () => {
    if (image == "" || createObjectURL == "") {
      updateProfile(auth.currentUser, {
        photoURL: user.photoURL,
        displayName: displayName,
      })
        .then(() => {
          alert("プロフィールを更新しました。");
          setResult("");
          setDisplayName("");
          router.push("/profile");
        })
        .catch((error) => {
          console.log(error);
        });
    } else {
      const result = await postImage(image);
      setResult(result);
      updateProfile(auth.currentUser, {
        photoURL: result,
        displayName: displayName,
      })
        .then(() => {
          alert("プロフィールを更新しました。");
          setResult("");
          setDisplayName("");
          router.push("/profile");
        })
        .catch((error) => {
          console.log(error);
        });
    }
  };

  return (
    <div>
      <Head>
        <title>漫画考察.net/プロフィール編集</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MuiNavbar />

      <h2 className="my-12 text-center text-2xl font-semibold">
        プロフィール画像の編集
      </h2>

      <p className="my-12 text-center font-semib">
        現在のユーザー画像
        {user && (
          <p className="text-center m-auto">
            <Image
              className="m-auto text-center max-w-sm"
              height={100}
              width={100}
              src={user.photoURL}
            />
          </p>
        )}
      </p>

      <Box
        component="form"
        sx={{
          "& > :not(style)": { m: 1, width: "25ch" },
        }}
        noValidate
        autoComplete="off"
      >
        <br></br>
        <img
          className="flex justify-center items-center m-auto  w-full"
          src={createObjectURL}
        />
        <label
          htmlFor="file-input"
          className="bg-primary-900 text-white-900 dark:bg-dark-900 flex justify-center items-center px-4 py-2 rounded mb-6 w-full"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-10 w-10 hover:cursor-pointer hover:bg-gray-700"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth="2"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
            />
          </svg>
        </label>
        <input
          id="file-input"
          className="hidden"
          type="file"
          accept="image/*"
          name="myImage"
          onChange={uploadToClient}
        />

        <p>名前： {user && <span>{user.displayName}</span>}</p>

        <TextField
          id="outlined-basic"
          label="名前"
          variant="outlined"
          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
            setDisplayName(event.target.value)
          }
        />
        <br></br>
      </Box>
      <br></br>
      <Button variant="outlined" className="m-5" onClick={updatename}>
        プロフィールを更新する
      </Button>
      <br></br>
    </div>
  );
}

補足情報（FW/ツールのバージョンなど）

"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.9.3",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/resolvers": "^2.9.7",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.0.0-rc.1",
"@mui/styled-engine-sc": "^5.0.0-rc.1",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"firebase": "^9.8.4",
"moment": "^2.29.4",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-hook-form": "^7.34.2",
"react-image-resizer": "^1.3.0",
"react-spinners": "^0.13.4",
"react-tag-input": "^6.8.1",
"react-tag-input-component": "^1.1.1",
"styled-components": "^5.3.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "^18.0.3",
"@types/react": "^18.0.15",
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"typescript": "^4.7.4

Answer 1

> var image = ""
< undefined
> image === null
< false

であるので、image が null である場合にも以下の場所でelseの側に行ってしまっており、nullはnameアトリビュートを持ってない、とエラーとなっていると考えられます。

  if (image === "") {
    return uploadResult;
  } else {
    const storageRef = ref(storage);
以下略

このif文で、imageがnullである場合もはじいてやればよさそうです。

Comments

[takoyan]

分かりやすい回答ありがとうございました。
解決できました。