Firebaseに値が入らない

Question

forebaseをつかいデータを入れようとしたらこのようなエラーが出ます
エラーなく値を入れるにはどうしたら良いのでしょうか

Error writing document:  FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object

import React, { useState } from 'react'
import { db, firebase } from '../../firebase/index'
import TextInput from '../../templates/UIkit/TextInput'
import PrimaryButton from '../../templates/UIkit/PrimaryButton'

const CreateHandson = () => {
  const [title, setTitle] = useState(''),
    [description, setDescription] = useState(''),
    [tag, setTags] = useState(''),
    [url, setUrl] = useState('')

  const timestamp = firebase.firestore.Timestamp.now()

  async function makeHandsOn() {
    try {
      const handsOn = {
        title: title,
        tag: tag,
        description: description,
        url: url,
      }
      console.log('makeHandsOn', data)
      const data = await db.collection('handsOn').doc(handsOn).set({
        title: title,
        description: description,
        tag: tag,
        url: url,
        created_at: timestamp,
        updated_at: timestamp,
      })
    } catch (error) {
      console.error('Error writing document: ', error)
    }
  }

  return (
    <section>
      <h2 className="u-text__headline u-text-center">商品登録、編集</h2>
      <div className="c-section-container">
        <TextInput
          fullWidth={true}
          label={'タイトル'}
          multiline={false}
          required={true}
          onChange={setTitle}
          rows={1}
          type={'text'}
        />
        <TextInput
          fullWidth={true}
          label={'説明'}
          multiline={true}
          required={true}
          onChange={setDescription}
          rows={5}
          type={'text'}
        />
        <TextInput
          fullWidth={true}
          label={'タグ名'}
          multiline={false}
          required={true}
          onChange={setTags}
          rows={1}
          type={'text'}
        />
        <TextInput
          fullWidth={true}
          label={'URL'}
          multiline={false}
          required={true}
          onChange={setUrl}
          rows={1}
          type={'text'}
        />
        <div className="module-spacer--medium" />
        <PrimaryButton label={'商品情報を保存'} onClick={makeHandsOn} />
      </div>
    </section>
  )
}

export default CreateHandson

      const data = await db.collection('handsOn').doc(handsOn).set({
のdocを消したり
      const handsOn = {
        title: title,
        tag: tag,
        description: description,
        url: url,
      }
handsOnの中身
title: '',
にしたり
title: [],
にしたのですが、
docを消すと
Error writing document:  TypeError: _firebase_index__WEBPACK_IMPORTED_MODULE_3__.db.collection(...).set is not a function
それ以外は
Error writing document:  FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object
とのエラーが出ます。

Comments

[Hogeike]

> このようなエラーが出ます
そうですか。としか回答できないです。
最低限何を試して何が分からないかを書きましょう。

Answer 1

const data = await db.collection('handsOn').doc(handsOn).set({ ...

doc()の引数はstringでは？

参考：Cloud Firestore にデータを追加する

Comments

[tomsuma]

ご回答ありがとうございます
.doc('handsOn')
にすると
Error writing document: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom SyntheticEvent object (found in field title in document handsOn/handsOn)
とのエラーに変わります

[nekoniki]

> .doc('handsOn')
firestore側のドキュメント名を指定する必要があります。

[tomsuma]

ご回答ありがとうございます！
ドキュメント名がよく分からなかったので
.doc('BJ')にしたり.doc("LA")にしたり、このアプリのプロジェクト名を入れてみたりしたのですが、駄目でした。。

[nekoniki]

> ドキュメント名がよく分からなかったので
firebaseのfirestore側でドキュメントの定義を行なっていると思います。
その名称そのままを入れれば動作すると思います。