0

firebaseの記事
のupdateProfileを使って、登録したnameを更新したいと考えています。
ですが、下記のエラーが出てしまいます。

Unhandled Runtime Error
TypeError: Cannot destructure property 'displayName' of 'undefined' as it is undefined.

Call Stack
updateProfile
node_modules/@firebase/auth/dist/esm2017/index-58473f72.js (5433:37)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
invokeGuardedCallbackAndCatchFirstError
node_modules/react-dom/cjs/react-dom.development.js (4291:0)
executeDispatch
node_modules/react-dom/cjs/react-dom.development.js (9041:0)
processDispatchQueueItemsInOrder
node_modules/react-dom/cjs/react-dom.development.js (9073:0)
processDispatchQueue
node_modules/react-dom/cjs/react-dom.development.js (9086:0)
dispatchEventsForPlugins
node_modules/react-dom/cjs/react-dom.development.js (9097:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (9288:0)
batchedUpdates$1
node_modules/react-dom/cjs/react-dom.development.js (26140:0)
batchedUpdates
node_modules/react-dom/cjs/react-dom.development.js (3991:0)
dispatchEventForPluginEventSystem
node_modules/react-dom/cjs/react-dom.development.js (9287:0)
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
node_modules/react-dom/cjs/react-dom.development.js (6465:0)
dispatchEvent
node_modules/react-dom/cjs/react-dom.development.js (6457:0)
dispatchDiscreteEvent
node_modules/react-dom/cjs/react-dom.development.js (6430:0)

と出てしまいます。userの情報は取得できており、
ユーザー写真やemailや名前は表示できているのですが、なぜか更新もできません。
入力欄は、値が一応受け取っている動きをしているので、
updateProfile(user, {の書き方が悪い感じでしょうか。
よろしくお願いします。

profile.js
import React from "react";
import { useEffect, useState } from "react";
import Link from "next/link";
import { app, database } from "../../firebaseConfig";
import {
  collection,
  addDoc,
  getDocs,
  doc,
  updateDoc,
  deleteDoc,
  Firestore,
} from "firebase/firestore";
import { useRouter } from "next/router";
import { getAuth, updateProfile } from "firebase/auth";
import { MuiNavbar } from "../../layouts/MuiNavbar";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import Grid from "@material-ui/core/Grid";
import Head from "next/head";

export default function Profile() {
  const [ID, setID] = useState(null);
  const [title, setTitle] = useState("");
  const [context, setContext] = useState("");
  const auth = getAuth();
  const user = auth.currentUser;
  const [photoURL, setPhotoURL] = useState();
  const [displayName, setDisplayName] = useState(user?.displayName);
  const [image, setImage] = useState();
  let router = useRouter();
  const databaseRef = collection(database, "CRUD DATA");
  const [firedata, setFiredata] = useState([]);

  console.log(user);
  console.log(displayName);

  if (user) {
    updateProfile(user, {
      displayName: displayName,
    })
      .then(() => {
        setDisplayName("");
        // setPhotoURL("");
        router.push("/profile");
      })
      .catch((error) => {
        console.error(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="m-5">プロフィール</h2>
      <p className="m-5">
        ユーザー画像: {user && <img src={user.photoURL} />}
      </p>
      <p className="m-5">名前: {user && <span>{user.displayName}</span>}</p>
      <p className="m-5">自己紹介:</p>
      <p className="m-5">
        メールアドレス: {user && <span>{user.email}</span>}
      </p>

      <p className="m-5">過去の投稿</p>

      <p className="m-5">いいねした投稿:</p>

      <Box
        component="form"
        sx={{
          "& > :not(style)": { m: 1, width: "25ch" },
        }}
        noValidate
        autoComplete="off"
      >
        <TextField
          id="outlined-basic"
          label="名前"
          variant="outlined"
          value={displayName || ""}
          onChange={(event) => setDisplayName(event.target.value)}
        />
      </Box>

      <Button variant="outlined" className="m-5" onClick={updateProfile}>
        更新する
      </Button>

      <Button variant="outlined" className="m-5" href="">
        <Link href="/profile/edit">更新</Link>
      </Button>
      <Button variant="outlined" className="m-5" href="/profile/edit">
        メールアドレスを変更する
      </Button>
      <Button variant="outlined" className="m-5" href="/profile/edit">
        パスワードを変更する
      </Button>
    </div>
  );
}
2

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。